While importing scss file into parent class css not get added

[kumaresan-subramani]

HI Team,

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

[Awjin]

The Sass itself is correct. I believe this behavior is due to Angular's component style scoping.