CSSはグローバルで読み込まれますが、CSS Modulesを使うと適用範囲をコンポーネント内に限定することができます。
しかし、ライブラリなどには下記のように、用意されたcssをグローバルに読み込む必要もあるので全てのCSSファイルをCSSModulesにするとうまく動作しなくなります。
import 'style.css'
そこでCSS ModulesとGlobal importを使い分ける必要があります。
CSS ModulesとGlobal importを使い分ける
Webpackの設定
{ test: /^((?!\.m).)+\.(css|scss)$/, use: [ 'style-loader', 'css-loader', ] }, { test: /\.m\.(css|scss)$/, use: [ 'style-loader', 'css-loader?modules', 'sass-loader?modules' ] },
お使いの環境に合わせてカスタマイズしてください。
上記の設定をwebpack.config.jsに記述すると以下の通りに読み込むことができます。
style.cssの時は、Global import
style.m.cssの時は、CSS Modules
フロントエンド開発でお困りのことはありませんか?
フロントエンドの開発支援を行っています。
・Reactの開発をお願いしたい
・コーディング作業を依頼したい
・javascriptライブラリを作って欲しい。
上記以外にも何かありましたらお気軽にお問い合わせください。