将变量导入React中的css模块

Question

我在组件旁边使用CSS模块和css/样式表文件。

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

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

Answer 1

您是否在使用CRA？如果是这样的话，你可以。你只需要确保你使用的是postcss和postcss-modules-values插件。注意:我还没有在没有创建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(文档)。