webpack4.x + sass-loader + postcss-loader + autoprefixerでscssファイルをコンパイルする

今日の環境

• Windows10 Home
• node 12.13.1
• npm 6.13.1
• webpack 4.41.2
• webpack-cli 3.2.3

プロジェクトディレクトリを作成

mkdir webpack_4_scss_introduction

cd webpack_4_scss_introduction

npm initする

npm init

グローバルにインストール

npm install -g webpack webpack-cli

プロジェクトにインストール

npm install -D webpack webpack-cli
npm install -D webpack-import-glob-loader
npm install -D style-loader css-loader sass-loader node-sass postcss-loader autoprefixer
npm install -D mini-css-extract-plugin

ディレクトリとファイルを作成

mkdir src\scss\modules
copy nul src\scss\style.scss
copy nul src\scss\modules\_mod_example.scss
copy nul webpack.config.js

webpack.config.jsの編集

以下の通り記述

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    style: './src/scss/style.scss',
  },
  output: {
    path: `${__dirname}/dist`,
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: 'css-loader',
            options: {
              // CSS内のurl()メソッドの取り込みを禁止する
              url: false,
              // ソースマップの利用有無
              sourceMap: true,
              // Sass+PostCSSの場合は2を指定
              importLoaders: 2
            },
          },
          {
            loader: 'postcss-loader',
            options: {
                // PostCSS側でもソースマップを有効にする
                sourceMap: true,
                plugins: [
                  // Autoprefixerを有効化
                  // ベンダープレフィックスを自動付与する
                  require('autoprefixer')({ grid: true })
                ]
            },
          },
          {
            loader: 'sass-loader',
          },
          {
            loader: 'webpack-import-glob-loader',
          },
        ],
      }
    ],
  },
  plugins:[
    // cssの出力先を指定する
    new MiniCssExtractPlugin({ filename: 'style/[name].css' }),
  ],
}

src/scss/style.scssの編集

webpack-import-glob-loaderをインストールしているのでglobパターンが使用できます。

@import "./modules/*";

src/scss/modules/_mod_example.scssの編集

autoprefixerが上手く機能しているか試す為に::placeholderを記述してみます。

/*
  残るコメント
*/
// 残らないコメント
.mod-example {
  .mod-example__hoge {
    background-image: url(../images/example.png);
  }
  ::placeholder {
    color: #aaaaaa;
  }
}

ビルドしてみる

webpack --mode=development

webpack --mode=development --watch

生成されたstyle.cssを確認する

ベンダープレフィックスが付いているのが確認できました。