Webpack css 模块仅在解构导入中随机化 class 名称

Question

我正在使用 css 模块 + 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 导入 classes 时：

.someClass {
  color: red;
}

像这样：

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

我最终会得到这样的 class 个名字：

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

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

有没有办法以某种方式区分解构的导入（如上）和这样的导入：

import 'somemodule/somestyle.css'

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

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

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

Webpack css 模块仅在解构导入中随机化 class 名称

Webpack css modules only randomize class names in destructured imports

css

webpack

css-modules