We have a core module that defines components, and child modules that inherit the core module (within a single app). Child modules contain child components, which inherit from core components.
Each component in the core module imports variables via a sass import. I want the child components to use different different sass variables, but without having to redefine all the css rules.
How can I achieve this?
Note: I've found a solution if each child module is in a separate app. Using the "stylePreprocessorOptions" config (defined per application) in .angular-cli.json, I'm able to import variables in the core components using the file name instead of the file relative path. That way, each child component uses the right variable files without anything to do. But I do not want to use several apps, as we'll have like 40 of them...
Thanks