css - Webpack css 模块只随机化解构导入中的类名

Question

我正在使用 css modules + scss 和这样的 webpack 配置(只添加了加载程序部分，其余部分非常标准):

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

所以当我从 style.scss 导入类时:

.someClass {
  color: red;
}

像这样:

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

我最终会得到这样的类名:

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

这对于本地样式非常有用，但不适用于依赖于确切类名的内容。

有没有办法以某种方式区分解构的导入(如上)和这样的导入:

import 'somemodule/somestyle.css'

这样后面的类名就不会被修改了？

我对任何解决方法感兴趣!

Answer 1

听起来加载器中的 exclude 可以解决问题。

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/
      }
    ]
  }
}