react + webpackのCSSモジュールとcssnextカスタムプロパティ

Question

私はちょうど、これらのようなcssnextカスタムプロパティを、反応のCSSモジュールと一緒に使用するのに最適なアプローチになるのだろうかと思っています。

モジュール間でこれらを共有する方法はありますか？

:root{ 
    --primary: pink; 
    --fontSize: 1rem; 
    --fullWidth: 100%; 
    --color: red; 
    --gutter: 1.618rem; 
} 
@custom-media --small-viewport (max-width: 30em); 
@custom-media --large-viewport (min-width: 75em); 
@custom-media --only-medium-screen (width >= 500px) and (width <= 1200px); 

EDIT：*** [OK]を私は、これを試し、それが働いたと思ったけどない

:global(:root) { 
    --primary: pink; 
    --fontSize: 1rem; 
    --fullWidth: 100%; 
    --color: pink; 
    --gutter: 1.618rem; 
} 

Answer 1

CSSモジュールだけのクラス名（つまり、ドットで始まる）ですセレクタを処理する必要があります。だから、それは問題ではないはずです。そして、それらがファイルにあるとすぐにそれらのカスタム定義を使用できるはずです。 postcss-importを使用して、グローバル定義を含むファイルをインライン化することができます。 postcss-ロ​​ーダーのみインポートしなければならない時に、単一のファイルを変換するので

• https://github.com/postcss/postcss-custom-properties#variables
• https://github.com/postcss/postcss-custom-media#extensions

Answer 2

：

別の解決策は、postcssプラグインのオプションを使用して、このグローバル値を定義することですあなたのカスタムプロパティ、例えば

@import './root.css'; 

.foo { 
    color: var(--primary); 
}