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

Question

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

例如： setting.css

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

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

Answer 2

您可以使用 CSS 自定义属性 (here's a tutorial I've found)。

在你的 settings.css 文件中，执行（`:root':

:root {
    --primary-color: #785372;
    --secondary-corlor: #22b390;
}

然后，您可以在相同或不同的文件中使用这些常量

.container {
    color: var(--primary-color);
}

如果您在不同的文件中使用它们，请务必导入这两个样式表，例如：

import './Button/styles.css'
import './settings.css'

此外，根据，您也可以在 html 中执行此操作，方法是链接两个样式表：

<link href="settings.css" rel="stylesheet">
<link href="Button/style.css" rel="stylesheet">

How to create a global settings file in react css modules