WebpackでSassをコンパイル

SassをWebpack(3.3.0)でコンパイルする環境を作ったのでメモ。

やりたいたことは

  • Sassのコンパイル
  • Autopefixer
  • Web Font (Font Awesome)使う

ファイル、ディレクトリ構成

今回のファイルとディレクトリの構成は以下のようになっている。

├── src
│   ├── img/hoge.jpg
│   ├── js/index.js
│   └── scss/app.scss
├── img
├── js
├── css
├── index.html
├── package.json
└── webpack.config.js

パッケージのインストール

必要なパッケージをインストールする。

npm i node-sass css-loader sass-loader postcss-loader file-loader webpack extract-text-webpack-plugin --save-dev

あとFont Awesomeもインストール。

npm i font-awesome --save

webpackの設定

webpack.config.jsは以下。

const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = { 
  entry: {
    index: './src/js/index'
  },  
  output: {
    path: path.resolve(__dirname, './js'),
    filename: '[name].js'
  },  
  module: {
    rules: [
    {
      test: /\.scss$/,
      use: ExtractTextPlugin.extract(
        {
          use: [
            {
              loader: 'css-loader'
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins: (loader) => [
                  require('autoprefixer')()
                ],
                sourceMap: true
              }
            },
            {
              loader: 'sass-loader',
              options: {
                outputStyle: 'compressed',
                sourceMap: true
              }
            }
          ]
        }
      )
    },
    {
      test: /\.(jpg|png|svg)$/,
      use: {
        loader: 'file-loader',
        options: {
          name: '../img/[name].[ext]'
        }
      }
    },
    {
      test: /\.(otf|eot|ttf|woff|woff2)(\?.+)?$/,
      use: {
        loader: 'file-loader',
        options: {
          name: '../css/[name].[ext]'
        }
      }
    }
    ]
  },
  plugins: [
    new ExtractTextPlugin('../css/app.css')
  ],
  resolve: {
    extensions: ['.js', '.scss']
  }
}

CSSファイルが出力されるまでの流れについて補足すると、

  • sass-loaderでSassをCSSにコンパイル
  • postcss-loaderでプラグインとしてAutoprefixerを実行する
  • css-loaderでCSSファイルをJSでrequireできるようにする
  • CSSをExtractTextPluginでCSSファイルとして出力する

また、CSSファイル内で記述されている画像やWeb Fontはfile-loaderを使ってJSがrequireできるようにしているという感じ。

webpackの実行

エントリーファイルになるsrc/js/index.jsでWeb Fontとscssファイルをrequireする。

require('font-awesome/scss/font-awesome');
require('../css/app');

また、package.jsonに

"scripts": {
  "build": "webpack -w"
},

を記述して、webpackを実行

npm run build

これでSassがCSSにコンパイルされ、画像やWeb Fontも問題なく扱うことができた。

参考記事

Webpack2+sassでbundle.cssを出力する&sassで画像ファイルを扱う
Load FontAwesome Fonts with Webpack 2