南 健太郎 
こんにちは！
個人開発者の南です。
今回はWebpackを使ってCSSをコンパイルする方法を紹介します。
VueJsなどのフレームワークを使用する時にcssをrequireするといったことがあると思います。
ただ、普通にコンパイルをしてもエラーが出てしまいますよね。
それを解決するには、css-loaderという仕組みを使います。
また、フレームワークを使わないにしても、どうせだったらcssもwebpackで管理できた方が何かと便利です。
そこで、今回はwebpackにcss-loaderをインストールして、CSSを管理する方法を紹介していきます。
css-loaderのインストール
では、実際にcss-loaderをインストールしていきます。
css-loaderをインストールするには、下記コマンドでインストールします。
ちなみに、下記のコマンドはインストールするwebpackがあるトップディレクトリで実行するようにしましょう。
|
1 |
npm install css-loader@2.1.1 |
上記のコマンドを入力することで、「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をインストールするには、下記のコマンドを実行しましょう。
|
1 |
npm install style-loader@0.23.1 |
上記のコマンドを実行すると、下記のようにstyle-loaderがインストールされます。
また、この記事では下記のバージョンのstyle-loaderを使用しています。
・「style-loader version 2.1.1」
css-loaderをwebpackの設定ファイルに反映
css-loaderとstyle-loaderの２つがインストールできたら、今度はwebpackの設定ファイルを設定していきます。
実際に、「webpack.config.js」を開いて下記の項目を追加します。
|
1 2 3 4 5 6 7 8 9 |
module:{ rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'], } ] } |
他にも設定しているファイルがあるかと思いますが、実際に記入すると下記のような感じになるかと思います。
ちなみに、注意点として必ず下記の順番で記述するようにしてください。
|
1 |
use: ['style-loader', 'css-loader'] |
webpackでは、右から順番にプラグインを使って処理をかけていくため、順番が違うとエラーが出てしまいます。
これで、webpackに設定ファイルを反映する作業は完了です。
実際の動作確認
では、実際に動作するかどうかを確認していきます。
適当にcssファイルを作って中身を下記のようにします。
|
1 2 3 |
body{ background: green; } |
僕は下記のようにディクレクトリを作って作成しました。
「src/css/app.css」
cssファイルが作れたら、次はjsファイルを作成します。
コンパイルするjsファイルに下記のように記載を入れましょう。
|
1 2 |
#作成したcssがある場所を指定 require('./css/app.css'); |
最後にhtmlファイルを作成します。
htmlファイルは下記のようにします。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> #コンパイルしたファイルを指定。 <script src="asset/app.js" type="text/javascript"></script> </body> </html> |
それぞれ準備ができたら、下記のコマンドを入力してコンパイルしましょう。
コンパイルすると、下記のようにjsファイルがコンパイルされます。
最後に、ページを開いて確認します。
ページが下記のように背景が緑のページが表示されると思います。
これでcss-loaderを使ったcssのコンパイル方法は完了です。
cssをファイルに保存する方法
おそらく、cssをhtmlに直接記述するのではなく、別で管理したいと思った人もいると思います。
cssをコンパイルして、１つのファイルに纏める場合は「Extract Text Plugin」をインストールします。
Extract Text Pluginのgit hub サイトはこちら
同じような流れで、下記のコマンドでインストールします。
|
1 |
npm install extract-text-webpack-plugin@2.1.2 |
インストールができたら、今度は「webpack.config.js」ファイルを編集します。
ファイルを下記のように書き換えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { module: { rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) } ] }, plugins: [ new ExtractTextPlugin("app.css"), ] } |
ちなみに、最初に記載したcss-loaderの記載は削除して、新しく記述し直します。
javascriptファイルについては、そのままrequireの記述のままにしておきます。
|
1 2 |
#jsファイルでは普通に読み込む。 require('./css/app.css'); |
あとは、コンパイルを掛けましょう。
コンパイルをかけると、「app.css」が生成されています。
これをhtmlファイルで読み込みます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> #htmlで読み込む。 <link rel="stylesheet" type="text/css" href="./asset/app.css"> </head> <body> <script src="asset/app.js" type="text/javascript"></script> </body> </html> |
これで、htmlに直接記述する形ではなく、１つのcssファイルにまとめるという形にすることができます。
まとめ
今回は、css-loaderを使ってwebpackでcssを管理する方法を紹介しました。
webpackを使うことで、cssをhtmlファイル内に直接記述する方法と、別ファイルに分ける方法の２つのパターンで管理することができます。
今回の記事があなたのお役に立てたら嬉しいです。