webpack(バージョン3)でCSSもビルド対象にする方法

webpackのcss-loaderとstyle-loaderを使って、CSSファイルをビルド(import)する方法を紹介していきます。

今回の検証で使ったwebpackのバージョンは、3.5.4です。

[スポンサーリンク]

今回やること

webpackでCSSもjsと一緒にビルドして、bundle.jsの中にCSSを入れ込みます。

前提条件

npmとwebpackはすでに入っているものとします。(バージョンは3以上がオススメ。)

そして、npm initで作業用プロジェクトはあらかじめ作っておきます。

以前コチラの記事でインストール手順を書いたので、まだnpmをインストールしていない方はこちらを参考にして下さい。

css-loader style-loaderをインストール

まず、webpackでCSSを扱うためcss-loader style-loaderの2つをインストールしていきます。

こちらを実行すると2つのインストールは完了します。

npm install --save-dev css-loader style-loader

実行後、package.jsonにdevDependenciesが追加されればOKです。

{
  "devDependencies": {
    "css-loader": "^0.28.5",
    "style-loader": "^0.18.2"
  }
}

こちらは今回のことにあまり関係はありませんが、npmでwebpackのビルドができるようにハイライト部分を追加しておきます。

{
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "css-loader": "^0.28.5",
    "style-loader": "^0.18.2"
  }
}

webpack.config.jsを修正する

CSSがビルドできるように、webpack.config.jsを以下のように修正しておきます。

var path = require('path');
 
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
};

お疲れ様でした。ここまでが設定となります。

あとは実際にCSSやHTMLを作っていきましょう。

フォルダ構成

今回はこのようなフォルダ構成としていきましょう。

  webpack-css
  |- package.json
  |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js
    |- style.css

style.css

ではまずは一番簡単なCSSから作っていきましょう。

body {
    background-color : aqua;
}

index.html

そしてお次はHTMLです。

<html>
 <head>
   <title>Getting Started</title>
 </head>
 <body>
  <p>test</p>
  <script src="bundle.js"></script>
 </body>
</html>

index.js

そして最後にエントリポイントであるjsファイルです。
ここにCSSを読み込むという設定をしていきます。

import "./style.css";
{
    console.log("aaa");
}

importの部分ですが、こちらでもOKです。

import style from "./style.css";
{
    console.log("aaa");
}

こちらもOKです。

import css from "./style.css";
{
    console.log("aaa");
}

ビルド

それでは役者も揃ったのでビルドしていきましょう!

ビルド方法はこのコマンドを実行するのでもいいですし、

webpack

package.jsonにbuildを設定したのであればこちらでもOKです。

npm run build

index.htmlを確認

index.htmlを開いて、bodyタグ内が青くなっていれば成功です!

ここまでお疲れ様でした。

さいごに

CSSもwebpackでビルドすると、CSSもbundle.jsの中に入ってきます。

CSSがjsの中に・・・?と最初のころは何とも変な気持ちでしたが、なれてくるとjsとCSSでファイルが分かれている方が煩わしくもなってきます。

今回は自分で作成したCSSを読ませる方法でしたが、BootStrapのような第三者が提供してくれるCSSも同じような要領で読み込むことができます。

最初は違和感があるけど慣れてくれば便利なものですよ。

それでは!