使用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插件

colors.css

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

的變量導出爲 @value的

button.css

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

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

爲例退房css-module-npm-boilerplate