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

Question

我正在使用 css modules and post-css. I have added the post-css-simple-vars 插件

colors.css

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

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

button.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;

button.css

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

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

Using css modules, how can I use composes to include a list of variables for colors