css - 使用 css 模块，如何使用 composes 来包含颜色变量列表

Question

我正在使用 css modules和 post-css .我添加了 post-css-simple-vars插件

colors.css

$orange:   #ff6600;
$blue:   #056ef0;

在我的 button.css 文件中，如何使用组合以便我可以在 colors.css 中重用变量？

按钮.css

.button {
    composes: * from '../styles/colors.css';
    background-color: $orange;
}

Answer 1

到目前为止，我发现的最佳方法是使用 postcss-modules-values 将变量导出为 @value插件

colors.css

@value blue: #0c77f8;
@value red: #ff0000;
@value white: #fff;

按钮.css

@value colors: "./colors.css";
@value blue, white, red from colors;

.button {
  color: blue;
  background-color: red;
}

查看 css-module-npm-boilerplate举个例子