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

回答1:

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.

来源：https://stackoverflow.com/questions/40133764/how-to-create-a-global-settings-file-in-react-css-modules