webpackでCSS loaderを使う

This post is also available in: English-US (英語)

webpackを使っていて、CSS loaderを使いたいという場合のメモです。
今回はReact.jsを使っている際の例ですが、CSS loaderの使い方はその他のプロジェクトでもあまり変わらないはずです。

CSS loaderをnpmインストール

webpackを使っているプロジェクトでcssファイルを使いたい場合の例です。

以下の例では、style-loader css-loader を npm コマンドでインストールします。

npm install --save style-loader css-loader

webpackの設定ファイルを編集する

そして、 webpackの設定ファイル(以下の例では webpack.config.js)を編集して、npmインストールした style-loader css-loader を定義します。
以下はReact.jsを使ったプロジェクトの例ですので、自分のプロジェクトに沿ったwebpackの設定を行ってください。

var path = require('path');
var webpack = require('webpack');


module.exports = {
    entry: './www/src/sample/app.jsx',
    output: {
        path: './www/sample/dist',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
           {
             test: /\.(js|jsx)$/,
             loader: 'babel',
             exclude: /node_modules/,
             query: {
               presets: ["es2015", "react"],
             }
           },
           {
             test: /\.css$/,
             loaders: ['style', 'css?modules'],
           }
        ]
    }
}

webpackについて学びたいという方は　世界最大級のオンライン学習サイトUdemy　をおすすめします。