Search code examples
cssangularjsangularsassng-upgrade

Switch between 2 global SCSS using selector

I'm upgrading my company AngularJS project to Angular 8 thanks to ngUpgrade. So I have a hybrid application with both angularjs and angular components. I am also using an angular material template that provides SCSS files for both angular and angularjs.

My problem is that I want to only use the ajs theme on ajs component and the angular theme on angular components (and they can also be nested).

I searched a way to apply only one global css when a specific class is applied and switch to another global css when another class is applied. I cant really do css lazy loading in this case

Lets assume my app code looks like this : 

<div class="theme-1">
    <div>Some stuff that should get theme 1 CSS</div>
    <div class="theme-2">
        <div>Some stuff that need ONLY theme 2 CSS</div>
        <div>without theme 1 CSS</div>
        <div class="theme-1">
            <div>Switching back to theme 1</div>
        </div>
    </div>
</div>

I want to be able to switch between theme when a class theme-1 or theme-2 occurs.

Solution

  • The solution in my case was to use encapsulation: shadowDow on my angular components. It allowed me to reset theme1 css and use only theme2 css.

    I had t do lots of css tweaks (some angular material features doesn't work with shadowDom...) and an cant switch back to theme1, but it has been the best solution so far.