CSS compilation with angular-cli

Question

I just started working on angular 4.0.0 and angular-cli is nice to have. But i am facing issue with compiling sass files.

rather than parsing all components .scss file as one , webpack is adding a inline style tag with all the css inside it .

Is it an expected behavior or i am missing some configuration for node-sass and sass-loader in angular-cli

     "styles": [
    "styles.scss"
  ],
   "defaults": {
"styleExt": "scss",
"component": {}

}

thats the cli configuration for styles.

for the app configuration styles.scss import app.components.scss and app.component.scss imports all other component's scss.

Thanks for your help.

That's not webpack doing the inline styles but Angular. It's how it works so expected behavior Read up on ViewEncapsulation — Neil Lunn
Thanks for the reply. But if one component is overriding property of other component . And Each components styles are included in HEAD in separate styles will it create conflict ? cause i am facing this issue where static html page with css works in all browsers but when i divided it into two components its breaking in IE — Ravi Jadhav
Like I said, "read" about ViewEncapsulation. You clearly don't understand it yet, nor what is really happening with those injected style tags — Neil Lunn

chris chris · Accepted Answer · 2017-05-18T05:00:27

The file styles.scss is typically used to store global styles. Please read more about it over here: https://github.com/angular/angular-cli/wiki/stories-global-styles

If you are having issues styling issues - please double check to ensure you have node-sass included in your package.json. If not, then npm install node-sass --save-dev

If I'm understanding your question right then yes it is expected behavior and Angular calls that behavior View Encapsulation. You can read more about it and how Angular works with styles here: https://angular.io/docs/ts/latest/guide/component-styles.html

CSS compilation with angular-cli

1 Answers