在 React 中将变量导入 css 模块答案

【问题标题】：Import variables into css module in React在 React 中将变量导入 css 模块
【发布时间】：2018-07-31 08:18:59
【问题描述】：

我使用 CSS 模块，我的 css/样式表文件位于组件旁边。

支持可导入样式表的全局颜色文件的最快方法是什么？

我的 css-modules 和 webpack 默认支持这个吗？帮助。

【问题讨论】：

【解决方案1】：

您在使用 CRA 吗？如果是这样，你可以。你只需要确保你使用的是 postcss 和 postcss-modules-values 插件。注意：在没有 Create React App 的情况下还没有测试过这个（还），所以如果有人有，知道会有所帮助。

现在，您只需要创建一个样式表（或者简单地使用 index.css，您可以选择），然后执行以下操作：

@value blue: #0c77f8;
@value red: #ff0000;
@value green: #aaf200;

现在，从您的组件范围的 css 文件中，只需导入和使用（几乎类似于 JS）：

/* import your colors... */
@value colors: "./colors.css";
@value blue, red, green from colors;

.button {
  color: blue;
  display: inline-block;
}

Source（文档）。

【讨论】：