Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
30 lines (20 sloc) 982 Bytes
title layout
CSS Modules
docs

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
You can’t perform that action at this time.