Search code examples
reactjsreact-css-modules

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;
}
Solution

  • 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;
}

    EDIT:
    Actually there's even more options, still through PostCSS plugins. postcss-simple-vars or postcss-custom-properties, the later having the clear advantage to stay close to the CSS specification. They all share the same requirement though, importing the configuration file in a way or another.