编译的 Sass 奇怪地改变了类名 Webpack 2 ExtractTextPlugin答案

【问题标题】：Compiled Sass has weird changed class names Webpack 2 ExtractTextPlugin编译的 Sass 奇怪地改变了类名 Webpack 2 ExtractTextPlugin
【发布时间】：2017-06-28 21:42:27
【问题描述】：

所以我的 webpack 2 配置中有以下代码。除了改变我的 css 类名之外，它似乎还有效。

模块：

test: [/\.scss$/, /\.sass$/],
loader: ExtractTextPlugin.extract({
  fallback: 'style-loader',
  use: [
    {
      loader: 'css-loader',
      options: {
        modules: true,
      }
    },
    {
      loader: 'postcss-loader',
      options: {
        importLoaders: 1
      }
    },
    {
      loader: 'sass-loader'
    },
  ],
}),

插件：

new ExtractTextPlugin({
  filename: 'global.css',
  allChunks: true,
}),

在 global.css 中输出的 CSS：

._346v3lRS9p5yMQOIqOJas_ {
  max-width: 100%;
  height: auto; }

._3jLdPG7qJYZI8jVfnpr2sy {
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 0.15rem;
  transition: all 0.2s ease-in-out;
  max-width: 100%;
  height: auto; }

._28w9sGKbZxXO8saGymF0cf {
  display: inline-block; }

这是怎么回事？

需要注意的是，如果我将模块 ExtractTextPlugin 更改为看起来像这样它不会使用 css 类名并看起来很好：

{
  test: [/\.scss$/, /\.sass$/],
  loader: ExtractTextPlugin.extract({
    fallbackLoader: 'style-loader',
    loader: `css-loader?moudules=true&!postcss-loader?importLoaders=1!sass-loader?`,
  }),
},

所以我真的很好奇发生了什么事？

【问题讨论】：

标签： sass webpack-2 css-loader extract-text-plugin

【解决方案1】：

{
  test: [/\.scss$/, /\.sass$/],
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      {
        loader: 'css-loader',
        options: {
          importLoaders: 2,
        }
      },
      {
        loader: 'postcss-loader',
        options: {
        }
      },
      {
        loader: 'sass-loader'
      },
    ],
  }),
},

修复将代码更改为上述问题。最重要的是从 css-loader 中删除模块。

【讨论】：

【解决方案2】：

这是通过“css-loader”的“localIdentName”属性控制的。默认情况下，它将您的类名解析为该结构。您可以使用以下内容覆盖它：

{
      loader: 'css-loader',
      options: {
        localIdentName: '[name]--[hash:base64:5]',
        modules: true
      }
    }

【讨论】：