LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

webpack4-sass-loaderのoutputStyleでエラー

Node.js image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

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

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

変更前7.3.1
変更後8.0.2
sass-loaderのバージョン
webpack4.43.0
webpack-cli3.3.11
webpackのバージョン

変更前の設定です。

webpack.config.js
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)

outputStyleなんて知らない?

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

implementation
sassOptions
prependData
sourceMap
webpackImporter

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

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

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

webpack4-css-loaderのminimizeでエラー
次のページ

JavaScriptの本

post-cta-image

『自分は向いていない』『やってみたけど挫折した』『プログラマだけどjavaScriptは未経験』『フロントエンドエンジニアを目指したい』など、いろいろなタイプに合わせた書籍を集めました。

どうしてもネットで自分で調べるのが苦手という人におすすめです。

将来的には、書籍を買わずにネット上の公式ドキュメントで情報収集できるようなものを選んでいます。


javaScriptの本5選

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください