sass或webpack如何让不同的样式文件加不同前缀？

Question

sass或webpack如何让不同的样式文件加不同前缀？
a.scss
b.scss

编译的时候让a文件的class自动加A前缀
b文件的class自动加B前缀

Answer 1

webpack可以实现你的要求，使用css-loader
配置

{
    loader: 'css-loader',
    options: {
        modules: {
            localIdentName: "[name]-[local]"
        }
    }
}

其中name就是文件名，local就是原有的css class,Id,keyframes

Answer 2

{
  test: /\.css$/,
  use: [
    {
      loader: 'css-loader',
      options: {
        //其中有个固定的参数modules，表示为普通的CSS样式表启用模块化
        modules: true,
        localIdentName: '[path][name]__[local]--[hash:base64:5]'
        // 分割线----------------------------
        // 如果上面配置有报错，则可以这样
        // css-loader从3.0.0版本开始，locaIdentName配置项的位置做了调整，由原来与modules同级调整为了modules下的一个属性。
        modules: {
            localIdentName: '[path][name]__[local]--[hash:base64:5]',
        },
      }
    }
  ]
}