Thorsten Westheider Thorsten Westheider - 1 month ago 28
CSS Question

Load some CSS with style-loader and some CSS with to-string-loader in Webpack 2

I'm working on an Angular 2 app and currently trying to build it with Webpack 2 (this is my first foray into Webpack).

I understand the difference between

style-loader
and
to-string-loader
, the former adds CSS to the DOM, the latter creates a string array for Angular 2 to consume via the
styles
property.

My question is, can I have both? Or put another way, if I have global styles in a file
site.css
, what is the proper way to bundle those with Webpack without changing the behavior for component styles (
to-string-loader
,
css-loader
)?

Just requiring or importing them in
main.ts
doesn't seem to be enough for Webpack to figure out what to do.

Answer

Loaders can be overridden for specific module request:

require("!!style!css!./global-styles/site.css");

Or different loaders can be defined for different conditions:

module: {
    loaders: [
        {
            test: /\.css$/,
            include: [path.resolve(__dirname, "global-styles")],
            loaders: ['style', 'css']
        },
        {
            test: /\.css$/,
            exclude: [path.resolve(__dirname, "global-styles")],
            loaders: ['to-string', 'css']
        },
    ...