Skip to content

CodeCoupler Webpack Import CSS Module Files

All required CSS files which ends with *.module.css will be handled as a CSS Module. A CSS Module is a CSS file where all class names and animation names are scoped locally by default. You can use the pseudo selectors :local and :global to define the scope of CSS classes.

To require a CSS Module file just put an import styles from "./path/to/your/file.module.css"; in any of your JavaScript or TypeScript files. This imports the stylesheet now as module called styles. This module offers all class names in the statement :local() as properties. The property will return a unique

Example CSS Module:

1
2
3
:local(.any-class-name) { 
  /* Your Stylesheet Here */
}

Example Usage:

1
2
3
import styles from "./your-css.module.css"

someElement.clasList.add(styles["any-class-name"]);

All converting, linting, auto-prefixing will be handled exactly like the other CSS files.

The default scope is global. If can specify other scopes like local or pure by renaming the file ending to *.module-global.css (default), *.module-local.css or *.module-pure.css.

Read more about the different scopes here: CSS Module Scopes

Read more about CSS modules: CSS Modules