css 个具有 webpack 小写文件名的模块

Question

我的 webpack.confg

中有以下规则

  use: [
    {
      loader: 'css-loader',
      query: {
        modules: true,
        sourceMap: true,
        importLoaders: 2,
        localIdentName: '[name]__[local]___[hash:base64:5]'
      }
    },
    'sass-loader'
  ]

这可行，但我的文件名是大写的，例如Label.scss

这意味着我的 class 名字显示为 Label__whatever__DRfgZ 例如。

文件名中 class 的第一部分是否要小写？

Answer 1

如果您使用的是 Webpack >= 2.2.1，您可以将 function 传递给加载程序选项：

{
  loader: 'css-loader',
  options: {
    modules: true,
    localIdentName: '[path][name]__[local]--[hash:base64:5]',
    getLocalIdent: (context, localIdentName, localName, options) => {
      return localIdentName.replace(/^./, string[0].toUpperCase());
    }
  }
}

css 个具有 webpack 小写文件名的模块

css modules with webpack lowercase file name

webpack

sass

css-modules