Download some CSS using a style loader and some CSS using a line loader in Webpack 2

Question

I am working on an Angular 2 application and am currently trying to create it using Webpack 2 (this is my first foray into Webpack).

I understand the difference between style-loaderand to-string-loader, the former adds CSS to the DOM, the latter creates a string array for Angular 2 to consume through the property styles.

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

Just needing or importing them into main.tsseems to be insufficient for Webpack to figure out what to do.

Answer 1

Loaders can be redefined for a specific module request:

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

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