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

Question

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 1

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']
        },
    ...