Question

我正在使用带有这样的webpack配置的css模块+ scss（仅添加了加载器部分，其余部分非常标准）：

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

Webpack css模块只在随机化的导入中随机化类名

1 个答案: