0

所以我的 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,
}),

CSS 在 global.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?`,
  }),
},

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

4

2 回答 2

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 中删除模块。

于 2017-06-28T22:14:27.723 回答
0

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

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

于 2017-07-15T10:35:10.720 回答