webpack4, sass-loaderのoutputStyleでエラー

webpackおなじみの、バージョンアップのオプション変更でエラーが出ました。

まぁこれが嫌で、たまにしかバージョンを上げないので、余計に出るんですが。

もうひとつ、あくまでwebpackはビルドツールなので不都合がない限り放置が多いというのもある。

変更前の設定です。

const MODE = process.env.NODE_ENV;
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// ソースマップ利用有無(productionのときは利用しない)
const isSourceMap = MODE === "development";

const CSS_Loader = {
  loader: "css-loader",
  options: {
    url: false,
    sourceMap: isSourceMap,
    importLoaders: 2,
  },
};
const PostCSS_Loader = {
  loader: "postcss-loader",
  options: {
    sourceMap: isSourceMap,
    plugins: [
      require("autoprefixer")({
        grid: true,
      }),
    ],
  },
};
const Sass_Loader = {
  loader: "sass-loader",
  options: {
    sourceMap: isSourceMap,
    outputStyle: "expanded", // 縮小なし、cssフォーマット出力
  },
};
module.exports = {
  module: {
    rules: [
      /*
       * sass, autoprefixer, non-minify, export -> .css
       */
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          CSS_Loader,
          PostCSS_Loader,
          Sass_Loader,
        ],
      },
    ],
  }
  // ほか省略
};

sass-loaderはデフォルトでminimize（縮小）します。このSassはCSSを整形された状態で出力したいのでoutputStyleで指定していました。

（あえて縮小なしの使いみちはあまりないが。）

するとこんなエラーが。

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'outputStyle'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (***\***\node_modules\schema-utils\dist\validate.js:96:11)
    at Object.loader (***\***\node_modules\sass-loader\dist\index.js:36:28)

ログを見るかぎり使えるオプションはこれ。

sass-loaderのドキュメントを確認するとやっぱり変わってた。

const Sass_Loader = {
  loader: 'sass-loader',
  options: {
    sourceMap: true,
    sassOptions: {
      outputStyle: 'compressed',
    },
  },
};

outputStyleはsassOptionsの中に入れちゃったようです。