#Interface: CssLoaderModules

The cssLoader.modules option enables/disables the CSS Modules specification and setup basic behavior.

#Properties

#auto?

optional auto?: boolean | RegExp | ((filename: string) => boolean)

The auto option allows CSS modules to be automatically enabled based on their filenames.

#Remarks

Given the various auto values, the behavior is described as follows:

• true: enable CSS modules for all files matching /\.module\.\w+$/i.test(filename) RegExp.

• false: disable CSS modules.

• RegExp: enable CSS modules for all files matching the auto.test(filename) RegExp.

• function: enable CSS modules based on the filter function.

See css-loader#auto for details.

#Default Value

true

#exportLocalsConvention?

optional exportLocalsConvention?: CssModuleLocalsConvention

The style of exported class names.

#Remarks

Given the various exportLocalsConvention values, the behavior is described as follows:

• 'asIs': Class names will be exported as is.

• 'camelCase': Class names will be camelized, the original class name will not to be removed from the locals

• 'camelCaseOnly': Class names will be camelized, the original class name will be removed from the locals

• 'dashes': Only dashes in class names will be camelized

• 'dashesOnly': Dashes in class names will be camelized, the original class name will be removed from the locals

See css-loader#exportLocalsConvention for details.

#Default Value

'camelCase'

#localIdentName?

optional localIdentName?: string

Sets the format of the className generated by CSS Modules after compilation.

#Remarks

Available placeholders:

• [local]: Original class name

• [hash]: Hash of the class name

• [path]: File path

• [name]: File name

• [ext]: File extension

See css-loader#localIdentName for details.

#Default Value

'[local]-[hash:base64:6]'

#namedExport?

optional namedExport?: boolean

Enables/disables ES modules named export for locals.

#Default Value

false

#Example

• style.css

.foo-baz {
  color: red;
}
.bar {
  color: blue;
}
.default {
  color: green;
}

• index.js

import * as styles from "./styles.css";

// If using `exportLocalsConvention: "asIs"`:
console.log(styles["foo-baz"], styles.bar);

// If using `exportLocalsConvention: "camelCaseOnly"`:
console.log(styles.fooBaz, styles.bar);

// For the `default` class name
console.log(styles["_default"]);