css modules with webpack lowercase file name

Question

I have the following rule in my webpack.confg

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

This works but my file names are upper case, e.g. Label.scss

Which means my class names come out as Label__whatever__DRfgZ for example.

Is there anyway to lowercase first part of the class that comes from the file name?

score 1 · Accepted Answer · answered Jul 30 '17 at 12:47

1

If you're using Webpack >= 2.2.1, you can pass a function to the loader options:

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

answered Jul 30 '17 at 12:47

lyosef

6,092
2
27
20

How can I use the same generator function in .babelrc? Using SSR for react modules with a random generator gives different hashes on client and node. – Debojyoti Ghosh Apr 20 '18 at 06:56

css modules with webpack lowercase file name

1 Answers1