如何在React CSS模块中创建全局设置文件 [英] How to create a global settings file in react css modules

问题描述

我想要一个文件来存储要在CSS样式中使用的颜色和其他一些设置.因为我不想在不同的文件中多次指定相同的颜色.如何使用CSS模块实现这一目标?

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?

例如: setting.css

For example: setting.css

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

Button/styles.css

Button/styles.css

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

推荐答案

来自看起来像Sass的示例(可以与CSS模块结合使用).如果是这样，则只需导入包含变量的部分.

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

如果不涉及Sass，则 postcss-modules-values 是您的意思寻找:

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

实际上，还有更多选项，仍然通过PostCSS插件. postcss-simple-vars 或

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.

这篇关于如何在React CSS模块中创建全局设置文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！