webpack - CSS モジュール: ファイルのローカル スコープを無効にするにはどうすればよいですか?

Question

私は新しいReactプロジェクトで (Webpack css loader を介して) CSS モジュールを使用しています。これは、JSが認識していないlocalclassNamesを作成しようとするためだと思います。react-selectファイル全体をインポートする方法はあり.scssますが、ローカルではなくグローバルにスコープされていますか?

Answer 1

Webpack 構成で css ローダーを使用する場合、通常?modulesは、クエリ文字列で有効にして CSS モジュールをアクティブにする必要があるため、:localデフォルトでスコープをアクティブにします。.selector { ... }これは、変換せずに宣言したい場合は、それを に使用する必要があることを意味します:global(.selector) {}。

SASS ローダーを使用しているため、ベンダーからの css を含めたい場合は、 を使用してインポートできます@import "~react-select"。あなたが言ったように問題は、これがライブラリからローカルに変換されたすべてのセレクターを取得することです。:globalこれを回避するには、次のようなセレクターと同じ方法でインポートを囲むことができます。:global { @import "~react-select"; }