26

The css-loader README suggests that localIdentName be set to

'[path][name]__[local]--[hash:base64:5]'

Is the hashing suffix necessary? Would it still be unique as this?

'[path][name]__[local]'

Why or why not?

The fact that #3 is an option in this GitHub Issue discussion leads me to believe it may not be necessary.

Matt VS
  • 278
  • 4
  • 19
Scotty H
  • 6,432
  • 6
  • 41
  • 94
  • 1
    According to [this css-loader github comment](https://github.com/webpack-contrib/css-loader/issues/413#issue-203652063), the hash, by default, will be "a digest of the relative path and the local classname", which makes it seem completely redundant in your first example! – jackocnr Sep 11 '18 at 12:00

3 Answers3

13

The localIdentName is used along with the modules options:

{
  loader: 'css-loader',
  options: {
    modules: true,
    localIdentName: '[path][name]__[local]--[hash:base64:5]'
  }
}

It generates longer class names like:

.src-styles-main__world-grid--R7u-K
 ---------------  ----------  -----
      path,name     local      hash

.src-styles-main__world-grid
 ---------------  ----------
      path,name     local

So, the hash would not be needed as long as path, name and class name generate unique IDs. It is very unlikely that the hash would be needed.

jordiburgos
  • 5,964
  • 4
  • 46
  • 80
2

localidentname on webpack 4.35.3 

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: 'css-loader',
        options: {
          modules: {
            localIdentName: '[path][name]__[local]--[hash:base64:5]',
          },
        },
      },
    ],
  },
};
Song
  • 593
  • 9
  • 21
0

Is the hashing suffix necessary?

Yes

Would it still be unique as this?

Would be yes and would be no. depends

Why or why not?

Then let see on documentation

The query parameter modules enables the CSS Modules spec. This enables local scoped CSS by default. (You can switch it off with :global(...) or :global for selectors and/or rules.).

By default CSS exports all classnames into a global selector scope. Styles can be locally scoped to avoid globally scoping styles.

The main purpose is here:

Styles can be locally scoped to avoid globally scoping styles.

You can do with this pattern '[path][name]__[local]', but you break the main purpose for scope.

If you have project frontend framework like angular or reactjs. for example angular with directive/component or reactjs with component, this is the main purpose use scope css. With CSS modules, you can write normal CSS code and make sure, that it only applies to a given component. And we don't need overthinking name or long name for specific class name to avoid overwrite css

hendrathings
  • 3,720
  • 16
  • 30