レスポンスCSSモジュールでグローバル設定ファイルを作成するには

Question

私は自分のCSSスタイルで使用する色やその他の設定を保存するだけのファイルが必要です。なぜなら私は異なるファイルで同じ色を複数回指定したくないからです。どのように私はCSSモジュールでそれを達成することができますか？例えば

： setting.css

$primary-color: #785372; 
$secondary-corlor: #22b390; 

（CSSモジュールと組み合わせて使用​​することができます）サスのように見えるあなたのサンプルから、ボタン/ Styles.cssを

.button { 
    background: $primary-color; 
    display: flex; 
} 

Answer 1

。その場合は、変数を含む部分をインポートします。

@import 'path/to/variables.scss'; 

何のサスはpostcss-modules-valuesあなたが探して何でそこ関与していないなら：

variables.css

@value primary: #785372; 
@value secondary: #22b390; 

styles.css

@value primary, secondary from './path/to/variables.css'; 

.button { 
    background: primary; 
    display: flex; 
} 

EDIT：
は、実際にはさらに多くありますPostCSSプラグインを使用しています。 postcss-simple-varsまたはpostcss-custom-propertiesであり、後者はCSS仕様に近い明確な利点があります。 これらはすべて同じ要件を共有していますが、設定ファイルを別の方法でインポートします。