reactjs - 如何在反应 css 模块中创建全局设置文件

Question

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

例如：setting.css

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

按钮/styles.css

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

score 0 · Accepted Answer

从看起来像 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 规范的明显优势。但是，它们都具有相同的要求，以某种方式导入配置文件。

score 0 · Accepted Answer

您可以使用CSS 自定义属性来做到这一点（这是我找到的教程）。

在您的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">

2 回答 2