webpackでSassをCSSファイルにコンパイルする

webpackの環境でCSSを別ファイルとして生成する方法を試してみます。

設定方法

webpackの環境に使用するパッケージを追加します。

npm install mini-css-extract-plugin css-loader postcss-loader sass sass-loader --save-dev

webpack.config.jsの設定を行います。
今回はsrc/sass/ 内にSassファイルを格納する想定で設定します。

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "sass-loader",
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/style.css'
    })
  ]
};

src/sass/ にstyle.scssを追加します。

body {
  background: orange;
  .sample {
    color: red;
  }
}

src/index.jsで追加したstyle.scssをインポートします。

import "./sass/style.scss";

console.log('sample');

ビルドを行うと、下記内容でdist/css/style.cssが生成されました。

body{background:orange}body .sample{color:red}