webpackでCSS loaderを使う

Published on:
Last updated:

This post is also available in: Japanese

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

CSS loaderをnpmインストール


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

npm install --save style-loader css-loader


そして、 webpackの設定ファイル(以下の例では webpack.config.js)を編集して、npmインストールした style-loader css-loader を定義します。

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 をおすすめします。

Kuniyoshi Takemoto is the founder of Amelt.net LLC, and editor of this blog(www.amelt.net).Learn more and follow me on LinkedIn.