webpackでCSSをバンドルする

webpackでCSSも含んだJavaScriptを生成したいときの設定メモ。

  1. css-loaderstyle-loaderを追加
  2. webpack.config.jsmoduleへ設定を追記
  3. webpackentry対象jsファイルで取り込みたいcssをimportする

必要なnpmパッケージ

css-loaderstyle-loaderが必要なので、それぞれインストールします。

$ npm install css-loader style-loader -D

webkackの設定

webpack.config.jsなどのwebpack設定ファイルのmoduleへ追記

module: {
  rules: {
    {
      test: /\.css$/,
      exclude: /node_modules/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            url: false,
          },
        },
      ],
    },
  },
}

CSSをimportする

webpackでバンドルする(webpack.config.jpでentryに指定している)jsファイルへ、取り込みたいcssファイルをインポートする記述を追加します。

import 'style.css';

これで、バンドルされたjsファイルのみ読み込めばstyle.cssで指定したスタイルも適用できるようになります。

関連記事