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

Posted 2023-02-21

【中文标题】如何在反应 css 模块中创建全局设置文件

【英文标题】：How to create a global settings file in react css modules

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

【讨论】：

谢谢。我去看看。

将它导入到您的App.scss 文件中（我打赌你有那个）

CSS 模块是按文件处理的，而不是像 Sass 那样从根文件导入所有部分。所以这行不通。需要在每个模块文件中导入带变量的部分（如果需要）。

【参考方案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">