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
– Neil Lunn, Commented May 17, 2017 at 23:37
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
– Ravi Jadhav, Commented May 18, 2017 at 1:48
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
– Neil Lunn, Commented May 18, 2017 at 2:51

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

0

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

answered May 18, 2017 at 5:00

chris

711 gold badge1 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS compilation with angular-cli

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related