問題タブ [css-modules]

私は現在、CSS モジュールについて学んでおり、多くの問題を解決してくれるようです。しかし、すべてのドキュメントは CSS に基づいているため、SASS を使用したいと考えています。

これは可能ですか？たとえば、次のステートメントを機能させるにはどうすればよいでしょうか?

私はプロジェクトにhttps://github.com/mxstbr/react-boilerplateを使用しています。これはスタイルに CSS モジュールと postCSS を使用しています。これは素晴らしいことです。ただし、タイポグラフィ、基本コンポーネントなどのグローバル CSS ファイルもいくつか必要です。これらを追加する方法のベスト プラクティスは何ですか? preCSSの使用を検討しましたが、これらのグローバル ファイルをメイン スタイルシートにインポートできるように、webpack 内で設定する方法が完全にはわかりません。私はwebpackが初めてなので（Sassを使用してGulp / Gruntのバックグラウンドから来ました）、ここで何か助けていただければ幸いです。

これらのファイルで定義されている変数とミックスインを CSS モジュール ファイルで使用できれば素晴らしいと思いますが、これが可能かどうか、または推奨されるかどうかは不明です。CSS モジュール ファイルの参照とグローバル CSS クラスの参照に使用できるように、react-css-modulesをインストールしました。styleNameclassName

属性があることは知っていますが、エラー クラスcomposes: class from '/path/to/file.css';など、さまざまなユーティリティ クラスが定義されているいくつかのグローバル ファイルが必要ですclearfix。したがって、 を使用するreact-css-modulesと、次のようになります。 <div className="clearfix" styleName="app-header">{...}</div>

繰り返しますが、これが正しいかどうかはわかりません。

私はオープンソース プロジェクトに取り組んでいるので、ベスト プラクティスに固執し、可能な限り最善の方法でそれを実行したいと考えています。アドバイスをありがとう！

ここに示すように、react css モジュールで機能するデコレータ構文を取得しようとしています。 https://github.com/gajus/react-css-modules#decorator

関数構文を使用して react-css-modules を動作させました。

CSSModules(Table, styles)

ただし、デコレータを使用する場合、たとえば

@CSSModules(styles)

export default class extends React.Component {}

何もインスタンス化されていないようで、エラーもスローされません。babel-plugin-syntax-decorators をロードしました。

何が欠けている可能性がありますか？ありがとう！！

CSS モジュールは ReactComponentクラスで魅力的に機能しますが、(つまり、クラスなしで) それらを自分で実装しようとするとpure components、Webpack はコードをコンパイルできません:

以下は単純なコンポーネントです。

...そしてスタイル

そして、developmentこれがベースを拡張する私の構成です（ここでは実際には必要ありません）：

最近、同じ機能コンポーネント (ビデオ プレーヤーなど) をさまざまな CSS スタイルで拡張できるようにする UI フレームワークに取り組んでいました。ReactJS と webpack をバンドラーとして使用し、css モジュールを使用します。ただし、モジュールで css-loader を使用しているため、同じコンポーネントに別のスタイルを適用するのは難しいことがわかりました。誰かがそれで共通の実験をしましたか? :D