Bruce Mu Bruce Mu - 1 year ago 119
React JSX Question

How to create a global settings file in react css modules

I want to have a file just to store the colors and some other settings that I am going to use in my css styles. Because I don't want to specify the same color in different files multiple times. How can I achieve that with css modules?

For example:

$primary-color: #785372;
$secondary-corlor: #22b390;


.button {
background: $primary-color;
display: flex;

Answer Source

From your samples that looks like Sass (which can be used in conjunction with CSS modules). If so then just import the partial containing the variables.

@import 'path/to/variables.scss';

If there's no Sass involved then postcss-modules-values is what your looking for:


@value primary: #785372;
@value secondary: #22b390;


@value primary, secondary from './path/to/variables.css';

.button {
  background: primary;
  display: flex;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download