I have a component with a .scss file where I want to define the styles for the component. (what a surprise) A minimal working example can be found here: Stackblitz example
If I define the style for the Switch in the app.scss it has no effect, but when doing the same in the styles.scss it all works fine.
Can someone elaborate on this a bit further and maybe explain a way on how to achieve the goal of beeing able to define component-related styles in the component.scss file?
That's because of the Encapsulation.
Every component has its own scope of code that applies to itself. For example, a very stupid one, you can have two components with the same function with the same name that do different things without any problem. The same rule applies to styles.
The reason why styiling or overriding things such as external libraries (Kendo, Material, etc) is usually done at root level is because you put the code in one place and it's valid across all the application. (IE: in the styles.scss file, that gets loaded at runtime).
If you want to do that override in your component, you can use Encapsulation.None in the component's decorator. Be aware that by doing that, all the styles defined in the component will be available to every components in your application, and you keep your component's code clean.