ブログ

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