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
