FakeRainBrigand FakeRainBrigand - 4 months ago 51
Javascript Question

Webpack loader aliases?

I have a fairly complicated loader setup for style sheets:

{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style",
"css?sourceMap&localIdentName=[path][name]__[local]__[hash:base64:5]!sass?outputStyle=expanded&" +
"includePaths[]=" + other stuff)
)
}


Which works great, but on some requires I want to add the
modules
option to css-loader, so it'd look like this:

require('./foo.scss!css?modules&sourceMap&localIdentName=[path][name]__[local]__[hash...');


But I can't do this all over the place.

How can I configure this so that I can enable the css-loader modules flag on certain requires while keeping the rest of it the same?

Maybe something like a loader 'alias', e.g.
require('./foo.scss!my-scss-with-modules-flag-alias')
?

The only solution I can think of is writing a loader that does a syntax transform to inline the loader config into certain require calls... but that's brittle and complicated.

Answer

resolveLoader.alias will work here. Ie.

resolveLoader: {
    alias: {
        'with-modules': 'loader definition goes here',
    }
}

Using this configuration you can do simply

require('with-modules!./foo.scss');

at your code.

Comments