0

Is it possible to change the localIdentName when using CSS modules in Webpack so that I can apply multiple class names?

My ultimate goal is to do something like this:

css?modules&localIdentName=[[name]-[local] [hash]]

where the class names that ultimately get applied are:

component-local hash.

The reason for this is so that I can apply my CSS safely whilst still exposing a nice human readable class name to those who want to override my CSS styles globally instead of them using the hash which changes every build.

Matt Derrick
  • 5,674
  • 2
  • 36
  • 52

1 Answers1

0

You cannot use multiple class names. It doesn't make sense to have multiple names for CSS classes, that's just applying multiple classes to an element. If you want to have nice names then you should just not include the [hash] in localIdentName.

For example with this configuration:

css-loader?modules&localIdentName=[name]-[local]

filename.css

.my-class {}

Will become:

.filename-my-class {}

You can also specify how many characters of the hash should be added. For instance [hash:4] adds just the first four characters of the hash to the name, if that is an acceptable middle ground for you.

Michael Jungo
  • 31,583
  • 3
  • 91
  • 84
  • 1
    Applying multiple classes to the element is exactly what I want to do. This is for a library and I want to apply my styles to a component using the hash so they are encapsulated and not globally affected whilst still offering a handle to those using my library to override the styles so they don't have to use the hash that can change every build. – Matt Derrick Mar 21 '17 at 19:34
  • In the case of a library, you should just use a name that is not conflicting, like `.mylibrary-component-class`, which you'd need anyway to not conflict with the users classes (when offering the override option). Or you could use Sass and provide variables that may be overriden. But if you insist on having two classes, then use the CSS modules and add a class name manually as a string. – Michael Jungo Mar 21 '17 at 19:53