webpackでcssをコンパイルする方法をご紹介!

こんにちは!
個人開発者の南です。

今回はWebpackを使ってCSSをコンパイルする方法を紹介します。

VueJsなどのフレームワークを使用する時にcssをrequireするといったことがあると思います。

ただ、普通にコンパイルをしてもエラーが出てしまいますよね。

それを解決するには、css-loaderという仕組みを使います。

また、フレームワークを使わないにしても、どうせだったらcssもwebpackで管理できた方が何かと便利です。

そこで、今回はwebpackにcss-loaderをインストールして、CSSを管理する方法を紹介していきます。

css-loaderのインストール

では、実際にcss-loaderをインストールしていきます。

css-loaderをインストールするには、下記コマンドでインストールします。

ちなみに、下記のコマンドはインストールするwebpackがあるトップディレクトリで実行するようにしましょう。

上記のコマンドを入力することで、「css-loader」がインストールされます。


人によっては、新しいバージョンの「npm」が利用できますと言われるかもしれませんが、今回の内容に関しては無視しておいて大丈夫かと思います。

また、この記事では下記のバージョンのcss-loaderを使用しています。

・「css-loader version 2.1.1」

style-loaderのインストール

今回css-loaderを使うにあたって、「style-loader」をインストールします。

sytle-loaderを使うことで、jsファイルで「require」したcssをstyleタグで、headタグ内に出力してくれるようになります。

sytle-loaderをインストールするには、下記のコマンドを実行しましょう。

上記のコマンドを実行すると、下記のようにstyle-loaderがインストールされます。


また、この記事では下記のバージョンのstyle-loaderを使用しています。

・「style-loader version 2.1.1」

css-loaderをwebpackの設定ファイルに反映

css-loaderとstyle-loaderの2つがインストールできたら、今度はwebpackの設定ファイルを設定していきます。

実際に、「webpack.config.js」を開いて下記の項目を追加します。

他にも設定しているファイルがあるかと思いますが、実際に記入すると下記のような感じになるかと思います。


ちなみに、注意点として必ず下記の順番で記述するようにしてください。

webpackでは、右から順番にプラグインを使って処理をかけていくため、順番が違うとエラーが出てしまいます。

これで、webpackに設定ファイルを反映する作業は完了です。

実際の動作確認

では、実際に動作するかどうかを確認していきます。

適当にcssファイルを作って中身を下記のようにします。

僕は下記のようにディクレクトリを作って作成しました。

「src/css/app.css」


cssファイルが作れたら、次はjsファイルを作成します。

コンパイルするjsファイルに下記のように記載を入れましょう。

最後にhtmlファイルを作成します。

htmlファイルは下記のようにします。

それぞれ準備ができたら、下記のコマンドを入力してコンパイルしましょう。

コンパイルすると、下記のようにjsファイルがコンパイルされます。


最後に、ページを開いて確認します。

ページが下記のように背景が緑のページが表示されると思います。


これでcss-loaderを使ったcssのコンパイル方法は完了です。

cssをファイルに保存する方法

おそらく、cssをhtmlに直接記述するのではなく、別で管理したいと思った人もいると思います。

cssをコンパイルして、1つのファイルに纏める場合は「Extract Text Plugin」をインストールします。

Extract Text Pluginのgit hub サイトはこちら

同じような流れで、下記のコマンドでインストールします。

インストールができたら、今度は「webpack.config.js」ファイルを編集します。

ファイルを下記のように書き換えます。

ちなみに、最初に記載したcss-loaderの記載は削除して、新しく記述し直します。


javascriptファイルについては、そのままrequireの記述のままにしておきます。

あとは、コンパイルを掛けましょう。

コンパイルをかけると、「app.css」が生成されています。

これをhtmlファイルで読み込みます。

これで、htmlに直接記述する形ではなく、1つのcssファイルにまとめるという形にすることができます。

まとめ

今回は、css-loaderを使ってwebpackでcssを管理する方法を紹介しました。

webpackを使うことで、cssをhtmlファイル内に直接記述する方法と、別ファイルに分ける方法の2つのパターンで管理することができます。

今回の記事があなたのお役に立てたら嬉しいです。

この記事を書いた人

南 健太郎

1991年生まれ。関西を中心にフリーのプログラマーをしています。
今は個人開発で生活できるようになるため、日々試行錯誤中。
個人開発や日々の技術に関する情報などを発信していきます。
Twitterやってます!
良かったらフォロー、よろしくお願いします!
Twitterのリンクはこちら