Bruce Mu Bruce Mu - 1 month ago 9
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:
setting.css

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


Button/styles.css

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

Answer

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:

variables.css

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

styles.css

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

.button {
  background: primary;
  display: flex;
}
Comments