css - css モジュールを使用して、コンポーズを使用して色の変数のリストを含めるにはどうすればよいですか

Question

私はcss モジュールとpost-cssを使用しています。post-css-simple-varsプラグインを追加しました

色.css

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

私のbutton.cssファイルで、構成を使用して変数を再利用するにはどうすればよいcolors.cssですか?

ボタン.css

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

score 3 · Accepted Answer

これまでに見つけた最善の方法は、 postcss-modules-valuesプラグイン@valueを使用して変数をとしてエクスポートすることです

色.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をチェックしてください

1 に答える 1