開発ツールこんにちは!個人開発者の南です。今回はWebpackを使ってCSSをコンパイルする方法を紹介します。VueJsなどのフレームワークを使用する時にcssをrequireするといったことがあると思います。普通にコンパイルをしてもエラーが出てしまいますよね。それを解決するには、css-loaderという仕組みを使います。フレームワークを使わないにしても、どうせだったらcssもwebpackで管理できた方が何かと便利です。そこで、今回はwebpackにcss-loaderをインストールして、CSSを管理する方法を紹介していきます。css-loaderのインストールでは、実際にcss-loaderをインストールしていきます。css-loaderをインストールするには、下記コマンドでインストールします。ちなみに、下記のコマンドはインストールするwebpackがあるトップディレクトリで実行するようにしましょう。css-loader@2.1.1上記のコマンドを入力することで、「css-loader」がインストールされます。人によっては、新しいバージョンの「npm」が利用できますと言われるかもしれませんが、今回の内容に関しては無視しておいて大丈夫かと思います。この記事では下記のバージョンのcss-loaderを使用しています。2.1.1」style-loaderのインストール今回css-loaderを使うにあたって、「style-loader」をインストールします。sytle-loaderを使うことで、jsファイルで「require」したcssをstyleタグで、headタグ内に出力してくれるようになります。sytle-loaderをインストールするには、下記のコマンドを実行しましょう。style-loader@0.23.1上記のコマンドを実行すると、下記のようにstyle-loaderがインストールされます。この記事では下記のバージョンのstyle-loaderを使用しています。2.1.1」css-loaderをwebpackの設定ファイルに反映css-loaderとstyle-loaderの2つがインストールできたら、今度はwebpackの設定ファイルを設定していきます。実際に、「webpack.config.js」を開いて下記の項目を追加します。'css-loader'],}]}他にも設定しているファイルがあるかと思いますが、実際に記入すると下記のような感じになるかと思います。ちなみに、注意点として必ず下記の順番で記述するようにしてください。'css-loader']webpackでは、右から順番にプラグインを使って処理をかけていくため、順番が違うとエラーが出てしまいます。これで、webpackに設定ファイルを反映する作業は完了です。実際の動作確認では、実際に動作するかどうかを確認していきます。適当にcssファイルを作って中身を下記のようにします。green;}僕は下記のようにディクレクトリを作って作成しました。「src/css/app.css」cssファイルが作れたら、次はjsファイルを作成します。コンパイルするjsファイルに下記のように記載を入れましょう。require('./css/app.css');12#作成したcssがある場所を指定require('./css/app.css');最後にhtmlファイルを作成します。htmlファイルは下記のようにします。#コンパイルしたファイルを指定。charset="UTF-8"><title>Document</title></head><body>#コンパイルしたファイルを指定。type="text/javascript"></script></body></html>それぞれ準備ができたら、下記のコマンドを入力してコンパイルしましょう。コンパイルすると、下記のようにjsファイルがコンパイルされます。最後に、ページを開いて確認します。ページが下記のように背景が緑のページが表示されると思います。これでcss-loaderを使ったcssのコンパイル方法は完了です。cssをファイルに保存する方法おそらく、cssをhtmlに直接記述するのではなく、別で管理したいと思った人もいると思います。Plugin」をインストールします。サイトはこちら同じような流れで、下記のコマンドでインストールします。extract-text-webpack-plugin@2.1.2インストールができたら、今度は「webpack.config.js」ファイルを編集します。ファイルを下記のように書き換えます。ExtractTextPlugin("app.css"),]}ちなみに、最初に記載したcss-loaderの記載は削除して、新しく記述し直します。javascriptファイルについては、そのままrequireの記述のままにしておきます。#jsファイルでは普通に読み込む。require('./css/app.css');12#jsファイルでは普通に読み込む。require('./css/app.css');あとは、コンパイルを掛けましょう。コンパイルをかけると、「app.css」が生成されています。これをhtmlファイルで読み込みます。#htmlで読み込む。charset="UTF-8"><title>Document</title>#htmlで読み込む。type="text/javascript"></script></body></html>これで、htmlに直接記述する形ではなく、1つのcssファイルにまとめるという形にすることができます。まとめ今回は、css-loaderを使ってwebpackでcssを管理する方法を紹介しました。webpackを使うことで、cssをhtmlファイル内に直接記述する方法と、別ファイルに分ける方法の2つのパターンで管理することができます。今回の記事があなたのお役に立てたら嬉しいです。健太郎1991年生まれ。都内でエンジニアをしています。このブログでは、個人開発や日々の技術に関する情報などを発信していきます。今回は、babel-loaderについて紹介していきます。健太郎2020年1月16日webpackこの投稿へのコメントコメントはありません。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。この投稿へのトラックバックコメントはありません。