SCSS `function`、` mixin`をCSSモジュールと組み合わせて使う方法は？

Question

私はReactプロジェクトでCSSモジュールを使い始めたばかりで、うまくアレンジしたいと思います。 SCSSのutils、関数などをグループ化していますが、CSSモジュールでは動作させることができません。私がrem関数を持っているとしたら、私はどのように私のプロジェクトでそれを使うことができますか？

:global {  
    @function rem($px) { 
    @return ($px/16px) * 1rem; 
    } 
} 

このような関数を作成しようと考えていましたが、これは動作しません。 CSSモジュールを使用してfunctionsを再利用することはできますか？

Answer 1

SassはCSSモジュールを認識していません。

私たちが一般的にやっていることは、出力に任意の物理的なCSSをしないcommon.scssを持っています。これは、（のようなものが伸び、サスは、私は信じて、コンポーネントレベルでコンパイルされているので、あなたが期待するようプレースホルダが動作しない）ミックスイン、関数や変数のために厳密です。私たちは、明示的に何の重複が生じないように、それはすべての終わりにプレーンCSSにコンパイルだから、それを必要とするすべてのコンポーネントにそのファイルをインポートします。

これは、我々は、少なくともVueの中で取るアプローチです。私はリアクションがあまりにも異なっているとは想像できません。