有没有办法在反应中使用 NPM CSS Loader/Style Loader 来限制类名长度？

Question

我在我的 React webpack CSS 加载器和样式加载器上配置为在加载 CSS 模块时混淆类名。

虽然生成的混淆类名看起来太长，但我想知道是否有一个参数或我可以在我的配置（webpack）上更改的东西来限制类名的大小。

类名示例：_2BzySvHGRXbDRB3RRdNEOO

Webpack代码：

{ 
  test: /\.css$/,
  use: [
    {
      loader: 'style-loader'
    },
    {
      loader: 'css-loader',
      options: {
        modules: true,
        importLoaders: 1,
        localsConvention: 'dashes'
      }
    }
  ]
}

Answer 1

您可以使用 localIdentName 来操作 CSS 字段。

例如

{
        test: /\.css$/i,
        loader: 'css-loader',
        options: {
          modules: {
            mode: 'local',
            exportGlobals: true,
            localIdentName: '[path][name]__[local]--[hash:base64:5]',
            context: path.resolve(__dirname, 'src'),
            hashPrefix: 'my-custom-hash',
          },
        },
      },

这可能无法正常工作，具体取决于您的 webpack 版本：

对用户有效的方法：参考：https://github.com/rails/webpacker/issues/2197

{ test: /\.css$/, 
  use: [ 
   { loader: 'style-loader' }, 
   { loader: 'css-loader', 
        options: { 
          modules: true, 
          importLoaders: 2, 
          localsConvention: 'dashes', 
          modules: { localIdentName: '[hash:base64:5]', 
}, 
} 
} 
] 
},

如果您从末尾删除散列，或者只使用散列，您将显着减少 class 名称长度。或者您可以在其位置编写自定义函数来减少它。

参考：https://github.com/webpack-contrib/css-loader#localidentname

参考：

有没有办法在反应中使用 NPM CSS Loader/Style Loader 来限制类名长度？

Is there a way to limit classname length with NPM CSS Loader/Style Loader in react?

reactjs

webpack

webpack-style-loader

css-loader