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

Question

我正在使用css modules和post-css。我添加了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;
}

查看css-module-npm-boilerplate以获取示例