0

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

Kumaresan Sd
  • 1,399
  • 4
  • 16
  • 34

1 Answers1

1

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.

naeramarth7
  • 6,030
  • 1
  • 22
  • 26
  • HI @naeramarth7, i am new to sass. Ca you please little more clear. Am i have to change anything from my scss files syntax......Thanks in advance – Kumaresan Sd Aug 11 '20 at 09:38
  • Hey @kumaresan_sd, the issue is not on your side – and from my point of view there's no easy way to fix this. This is an issue by [ej2](https://github.com/syncfusion/ej2-javascript-ui-controls#readme) not allowing a nested import by the way they uses the _parent selector_. Some libraries come with a _mixin_ to setup the styles, but ej2 does not seem to do so – your best bet might be to as for help at ej2. – naeramarth7 Aug 11 '20 at 09:46
  • HI @naeramarth, Thank you so much for validating my issue. Actually i am from ej2. i just want find some way to resolve this issue i mean syntax chages. Thanks in advance – Kumaresan Sd Aug 12 '20 at 04:54
  • Is there actually a reason for prefixing top level selectors in a library with `#{&}` ? – naeramarth7 Aug 12 '20 at 07:00
  • thank you so much for your suggestion while `#{&}` removing this it generates proper css and theme applied fine – Kumaresan Sd Aug 17 '20 at 12:57
  • @naeramath7, is there any alternate scoping available instead of `#{&}` since i am using this to differentiate my 'two` kind of styles like `kumar-mat1` and kumar-mat2` – Kumaresan Sd Sep 21 '20 at 03:18
  • @kumaresan_sd you can still differentiate by importing within `kumar-mat1` and `kumar-mat2` but the top level selectors (`#{&}`) **in the library** need to be removed, since they are duplicating your selectors. – naeramarth7 Sep 22 '20 at 09:21
  • i think you misunderstood my problem, i have two jind of component like `ej-button` and `ej2-button` both using same classes like "e-btn". to provide compatible support i have used that selector which avoids that css overlapping when using both ej and ej2 button in same page – Kumaresan Sd Sep 22 '20 at 11:26