Webpack 3构建中CSS选择器被格式化为奇怪字符串的问题求助

嘿，你遇到的这个CSS选择器变成奇怪字符串的问题，根源在于你开启了CSS模块化（CSS Modules）——看你的scss规则里，css-loader配置了modules: true，这会自动把样式文件里的类名转换成唯一的哈希值，目的是避免不同组件的样式冲突，但如果不是你需要的特性，就会觉得这是"奇怪字符串"。

下面给你几个可行的解决办法：

方案1：直接关闭CSS模块化 #

如果你完全不需要样式隔离的功能，把css-loader里的modules: true改成modules: false就行：

{ 
  test: /\.scss$/, 
  use: ExtractTextPlugin.extract({ 
    use: [ 
      { 
        loader: "css-loader", 
        options: { 
          minimize: true, 
          modules: false, // 这里改成false，关闭模块化
          importLoaders: 1 
        } 
      }, 
      { loader: "postcss-loader", options: { path: './postcss.config.js' } }, 
      { loader: "sass-loader", options: { includePaths: [dirAssets] } } 
    ], 
    fallback: "style-loader", 
    publicPath: './' 
  }) 
}

方案2：保留模块化但自定义类名格式 #

要是你还想保留样式隔离，只是不想用默认的纯哈希类名，可以通过localIdentName自定义类名格式，比如保留原类名加短哈希后缀：

{ 
  loader: "css-loader", 
  options: { 
    minimize: true, 
    modules: true,
    localIdentName: '[name]__[local]--[hash:base64:5]', // 自定义类名格式
    importLoaders: 1 
  } 
}

这样生成的类名会是类似Header__title--x2d3f的格式，既保留了可读性，又能避免样式冲突。

方案3：混合使用局部和全局类名 #

如果只想对部分类名启用模块化，其他类名保持原样，可以在SCSS文件里用:global()包裹全局类名：

// 这个类名会被哈希化（局部作用域）
.local-btn {
  background: #2196F3;
}

// 这个类名会保持原样（全局作用域）
:global(.global-btn) {
  background: #F44336;
}

另外注意哦，你的.css文件规则里没有开启模块化，所以只有.scss文件会出现这个问题，上面的修改都是针对.scss的css-loader配置~

内容的提问来源于stack exchange，提问作者Sascha