【Webpack】CSSのglobal importとcss modulesを使い分ける方法

【Webpack】CSSのglobal importとcss modulesを使い分ける方法

LINEで送る
Pocket

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

 

LINEで送る
Pocket

フロントエンド開発でお困りのことはありませんか?

フロントエンドの開発支援を行っています。

・Reactの開発をお願いしたい

・コーディング作業を依頼したい

・javascriptライブラリを作って欲しい。

上記以外にも何かありましたらお気軽にお問い合わせください。

コメントを残す