Search code examples
angularsassangular-cli-v9

While importing scss file into parent class css not working properly

Below is my scss file

.mat {
@import "ej2-base/styles/material.scss";
@import "ej2-buttons/styles/material.scss";
@import "ej2-popups/styles/material.scss";
@import "ej2-splitbuttons/styles/material.scss";
}
.boot{
    @import "ej2-base/styles/bootstrap.scss";
    @import "ej2-buttons/styles/bootstrap.scss";
    @import "ej2-popups/styles/bootstrap.scss";
    @import "ej2-splitbuttons/styles/bootstrap.scss";
}

In here, i want to load material theme while changing class to the body.But styles not get added

Here i have attched my sample scsssIssue.zip

Repo steps

  • Download above sample

  • GIve npm i command then ng serve

  • you will see button in browser

  • Then click click me button - style wont get added'

if you chage scss like below

@import "ej2-base/styles/material.scss";
@import "ej2-buttons/styles/material.scss";
@import "ej2-popups/styles/material.scss";
@import "ej2-splitbuttons/styles/material.scss";

Style getting added properly.

Reference : https://github.com/sass/sass/issues/2888

Solution

  • This isn't an issue with angular nor with sass but rather with the component library you're using. Since they're using a lot of #{&}'s for scoping, your root selector (e.g. .mat) will be re-used / duplicated and creates rules such as:

    .mat .mat.e-btn { }

    Notice the second .mat which is created by a their #{&}.e-btn selector.