No styles.css file or docs unclear about global styles

[keithmichelson]

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
   Mac OSX El Capitan
2. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:
   1.0.0-beta.11-webpack.2
3. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.
   Build a new project with ng new filename --style=scss

The readme talks about a styles.css but there is no styles.css or styles.scss file for global styles created. If I need to create one manually I'm not sure where to do it or how it needs to be wired up to be included in the webpack bundle.

[penleychan]

From my understanding static files should go under public folder. When you do ng build it will get copied over to .\dist (I'm using angular-cli@webpack)

[keithmichelson]

I can put a .css file in the public folder and link it in the index.html but I don't believe I can get a global .scss file working that way.

[iBasit]

+1

[iwoogy]

I found this article about including global css with webpack and angular 2.
http://blog.assaf.co/angular-2-webpack-sass-and-viewencapsulation/

However I don't know how to configure webpack with angular cli.

Does anyone know how to do it ?

[martoncsikos]

+1

It's unclear how to use styles.scss for global styles (and potentially importing 3rd party scss) on 1.0.0-beta.11-webpack.2.

I believe the article posted by @iwoogy applies to the previous version of the CLI used with webpack, the webpack version doesn't seem to allow configuration of the webpack build like that.

EDIT:
#1633 seems related

[keithmichelson]

@iwoogy Here is how you auto update to webpack https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md
But you might want to wait until they get to that pull request.

[iwoogy]

@keithmichelson Thanks for the link.

I actually create my project with :
angular-cli: 1.0.0-beta.11-webpack
node: 6.3.0
os: darwin x64

I never tried the content of this article :
http://blog.assaf.co/angular-2-webpack-sass-and-viewencapsulation/

However if there is a way to configure webpack it would be worth trying.

Since it does not seem to be a clear documentation on how to configure webpack for now, I will use node-sass to compile to the public folder.

The ultimate goal I'd like to achieve would be to have the same features that I have setup for my angular 1 projects about global css embedding :

• compile from sass
• fingerprinting
• minifying
• gzipped (ready for nginx to serve)

[filipesilva]

The readme is in a bit of a bad place right now: we're adding functionality for webpack but haven't cut a release in a week or so and a lot has changed. The styles.css file is part of the changes that haven't gotten a release yet, but it will be out soon.

Meanwhile you can use the master build as described in https://github.com/angular/angular-cli#development-hints-for-hacking-on-angular-cli, but I understand that's a bit of a hassle so my advice for global styles is to wait for the next webpack release.

[keithmichelson]

@filipesilva Ahh, okay thanks for clearing this all up. Glad you are aware of it all, does that include global .scss as well?

I can wait a bit, but hopefully not too long :) Thanks for the work on this, it will be really nice to use.

[filipesilva]

Yeah you can use global css/sass/less/stylus, it should just work.

[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.}