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

【问题标题】：How to create a global settings file in react css modules如何在反应 css 模块中创建全局设置文件
【发布时间】：2017-03-01 05:36:44
【问题描述】：

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

例如：设置.css

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

按钮/styles.css

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

【问题讨论】：

【解决方案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 规范方面具有明显优势。不过，它们都具有相同的要求，以某种方式导入配置文件。

【讨论】：

【解决方案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'

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

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

【讨论】：