Sass file import in every component creating duplicate copies of sass file data on run time

[amareshteja]

I'm trying to use Sass with angular 4. like this,
@import "~assets/css/svg-icons";

Everything works fine. But the problem is, I've to import same sass file in every component individually (In both parent and child components).
So on compile time angular-cli injecting complete content of svg-icons.scss file, in every component with some attribute appended to all the classes of that file, like .view-icon[_ngcontent-c1], .view-icon[_ngcontent-c2].

So, If there is 100 lines of code in svg-icons.scss, and If I import it in 10 components, It'll be 1000 lines of duplicated code, which will be injected to index.html, on run time. I don't want this duplication of code as this increases the size of the file exponentially. How can I resolve this?

[Ristaaf]

This is basic sass behaviour, you should never import things that result in css several times (sass files imported into component should typically only contain variables, mixins and functions). If you need your import to happen only once, add it to the styles part of .angular-cli.json. (btw the attribute part of the css rules are from having your angular components encapsulated (on by default) this is to make sure that your css in a component does not apply to anything outside your component).

[david-bulte]

But if you need something from another scss file in the component.scss file, how would you accomplish this without an import? Eg. you need the '$primary' variable (bootstrap user here). You could of course put all your styles in the global styles.scss file, but then you loose the advantage of keeping the styles local to the component. Couldn't the cli provide some help here?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}