Angular 2/4: Loading sass variables on a module

Question

We have a main module that defines the components and child modules that inherit the main module (within the same application). Child modules contain child components that inherit from the main components.

Each component in the main module imports variables through sass imports. I want child components to use different sass variables, but without having to override all css rules.

How can I achieve this?

Note. I found a solution if each child module is in a separate application. Using the "stylePreprocessorOptions" configuration (defined for each application) in .angular-cli.json, I can import the variables into the main components using the file name instead of the relative file path. Thus, each child component uses the correct variable files without any action. But I do not want to use several applications, since we will have 40 of them ...

thank

Answer 1

If you change your existing style in your project

ng set defaults.styleExt scss

Cli processes the rest.

, scss CLI. , ?