如何在react css模块中创建全局设置文件

Question

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

例如： setting.css

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

按钮/ styles.css的

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

Answer 1

从您的样本看起来像Sass（可以与CSS模块一起使用）。如果是，那么只需导入包含变量的部分。

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

如果没有涉及Sass，那么postcss-modules-values就是您的目标：

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或postcss-custom-properties，后者具有明显的优势，可以接近CSS规范。 但是，它们共享相同的要求，以某种方式导入配置文件。