使用NPM CSS Loader / Style Loader在反应中是否有限制类名长度的方法？

Question

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

尽管生成的混淆的className似乎太长，但我想知道是否有参数或可以在我的配置（webpack）上更改以限制className大小的内容。

ClassName示例：_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',
          },
        },
      },

如果从头开始删除哈希，或者仅使用哈希，则将大大减少类名的长度。或者您可以在其位置编写一个自定义函数以减少它。

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

ref：Modify output of localIdentName / getLocalIdent