Angular Template: components css

[rbasniak]

On Angular template (fresh clone, no edits, just installed packages and ran webpack.vendor.js) I tried to create a style file for the counter component like this:

styles: [require('./counter.component.css')]

Then I got the following exception:

ERROR in ./ClientApp/app/components/counter/counter.component.css
Module build failed: Error: Cannot find module './../../../../node_modules/css-loader/lib/css-base.js'

Based on #132 I changed the css loader on webpack.config.js like this:

{ test: /\.css$/, loader: 'raw-loader' }

Now the page loads, but I get the following error message on Chrome console:

Uncaught Error: Expected 'styles' to be an array of strings.

What is the correct way of setting component stylesheets?

[colltoaction]

styles: [require('./counter.component.css').toString()]

But you're going to run into other issues as you've seen in #132. Let's hope someone takes a look at this. And @MarkPieszak, there's an easy repro here :).

[SteveSandersonMS]

If I'm following your requirement correctly, this already works fine - you just have to know about Webpack's surprising syntax :)

The syntax you want is this:

styles: [require('!raw!./counter.component.css')]

Notice the leading !raw! (and not just raw! - the ! prefix overrides all other loaders configured, instead of just adding to the chain). This means that, when Webpack builds the file, it will inline the contents of the .css file as a string literal, so at runtime (both on server and client), it's precisely equivalent to having styles: ['some CSS as a string here']. This already works correctly both for server-side and client-side rendering.

If you want to use LESS/SASS/etc., you can add that to the loaders chain there too. Docs now added here.

Because this keeps coming up as a question, I'm now changing the default Angular2Spa template so that it references its styles in this way out of the box. This is actually quite a big improvement, because now Hot Module Replacement will work for style changes automatically too, and eliminates the need for ExtractTextPlugin. So thanks for raising this point :)