Saber

Saber supports CSS Modules alongside regular stylesheets using the [name].module.css file naming convention. CSS Modules allows the scoping of CSS by automatically creating a unique classname of the format [filename]\_[classname]\_\_[hash].

TIP: Should you want to preprocess a stylesheet with Sass then make sure to follow the installation instructions and then change the stylesheet file extension as follows: [name].module.scss or [name].module.sass.

CSS Modules let you use the same CSS class name in different files without worrying about naming clashes. Learn more about CSS Modules here.

With styles.module.css

.error {
  background-color: red;
}

You can import it directly:

import styles from './styles.module.css'

console.log(styles.error)
// => You get a class name:
// Button_error_ax7yz