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 import a CSS Module, put an import styles from "./path/to/your/file.module.css"; in any of your JavaScript or TypeScript files. This imports the stylesheet as a module called styles. This module offers all class names in the statement :local() as properties. The property will return a unique

All files are interpreted as SCSS, regardless of the file extension. You can use both .module.css and .module.scss.!1

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"]);

Converting, linting, and auto-prefixing will all be handled exactly as they are for the other CSS files.

The default scope is global. You can specify other scopes, such as local or pure, by renaming the file extension to *.module-global.css (the 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

  1. Up through version 5.1, there were issues with using SCSS in CSS module files ↩