带有 webpack 小写文件名的 css 模块

【问题标题】：css modules with webpack lowercase file name带有 webpack 小写文件名的 css 模块
【发布时间】：2017-07-29 11:03:53
【问题描述】：

我的 webpack.confg 中有以下规则

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

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

这意味着我的班级名称例如以Label__whatever__DRfgZ 出现。

无论如何，来自文件名的类的第一部分是否小写？

【问题讨论】：

标签： webpack sass css-modules

【解决方案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());
    }
  }
}

【讨论】：

如何在 .babelrc 中使用相同的生成器函数？将 SSR 用于带有随机生成器的反应模块会在客户端和节点上提供不同的哈希值。