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.

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.

• javascript
• webpack
• webpack-style-loader

2 Answers 2

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.

The resolveLoader.alias might work in the given case, since you are using a plugin as the loader. However if you need to use a chain of loaders, it will not work. (There's a feature request on it: https://github.com/webpack/webpack/issues/2772).

Instead you can add a parameter to the file in the require statement

var styles = require('./foo.scss?modules');

And create a new loader rule:

module: {
    loaders: [
        ...
        { test: /\.scss$/, loader: 'style!css!postcss!sass' },
        { test: /\.scss\?modules$/, loader: 'style!css?modules!postcss!sass' }
    ]
}