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.

Estus Flask · Accepted Answer · 2016-11-06 20:48:03Z

7

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

answered Nov 6, 2016 at 20:48

Estus Flask

227k79 gold badges478 silver badges621 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related