Dean Gibson Dean Gibson - 1 month ago 19
React JSX Question

How to use global variables in CSS-Modules?

I'm busy learning React with CSS-Modules and I don't quite understand how one would store variables? For example, in Sass you're able to do this:

// _variables.scss
$primary-color: #f1f1f1;

// heading.scss
@import './variables';
.heading {
color: $primary-color

How do you achieve this in CSS Modules?


One way could be to use dependencies. For example,

// variables.css
.primaryColor {
  color: #f1f1f1

// heading.css
.heading {
  composes: primaryColor from "./variables.css"

See more detailed information here:

If you're using webpack there are more examples here:

Also if you are using webpack you can still use Sass with CSS modules.