Webpack css modules only randomize class names in destructured imports

Question

I'm using css modules + scss with a webpack config like this (added only the loader part the rest is pretty standard):

module.exports = {
  module: {
    loaders: [
      {
        test: /\.(scss|css)$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!sass-loader',
        }),
      }
    ]
  }
}

So when I'm importing classes from style.scss:

.someClass {
  color: red;
}

Like this:

import { someClass } from './style.scss'

I will end up with class names like this:

<div class="style__someClass___2njNO">...</div>

This is very useful for local styles, but will not work with stuff that relies on exact class names.

Is there a way to somehow distinguish destructured imports (like above) from imports like this:

import 'somemodule/somestyle.css'

So that class names in the later won't be modified?

I'm interested in any workaround!

Answer 1

Sounds like an exclude in the loader would do the trick.

module.exports = {
  module: {
    loaders: [
      {
        test: /\.(scss|css)$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!sass-loader',
        }),
        exclude: /your-package-name/
      }
    ]
  }
}