ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

webpack4, css-loaderのminimizeでエラー

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

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

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

変更前1.0.1
変更後3.5.3
css-loaderのバージョン
webpack4.43.0
webpack-cli3.3.11
webpackのバージョン

『バージョンを一気に上げたらそうなるわ!』ですが、webpackのバージョン5(ベータ版)が出てからけっこう時間が経ってます。

安定版が出てきてもおかしくないのでパッケージのバージョンを一度最新にする必要がありました。

変更前の設定です。

webpack.config.js
const MODE = process.env.NODE_ENV;

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

const Style_Loader = {
  loader: "style-loader",
};
const CSS_Loader = {
  loader: "css-loader",
  options: {
    // CSS内のurl()の取り込み
    url: false,
    minimize: true,        // <---------- エラー
    sourceMap: isSourceMap,

    // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader
    importLoaders: 2,
  },
};
const PostCss_Loader = {
  loader: "postcss-loader",
  options: {
    sourceMap: isSourceMap,
    plugins: [
      require("cssnano")(),
      require("autoprefixer")({
        grid: true,
      }),
    ],
  },
};
cosnt Sass_Loader = {
  loader: "sass-loader",
  options: {
    sourceMap: isSourceMap,
  },
};

module.exports = {
  module: {
    rules: [
      /*
       * sass, autoprefixer, minify, export -> .js (bundle)
       */
      {
        test: /sample\.scss$/,
        use: [
          Style_Loader,
          CSS_Loader,
          PostCss_Loader,
          Sass_Loader,
        ],
      },
    ],
  }
  // ほか省略
};

するとこんなエラーが。

Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'minimize'. These properties are valid:
   object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals?, esModule? }
    at validate (***\***\node_modules\schema-utils\dist\validate.js:96:11)
    at Object.loader (***\***\node_modules\css-loader\dist\index.js:36:28)

css-loaderのオプションminimizeが無くなったのは新しい情報ではありません。2年くらい前には無くなってます。

(直すのが面倒でわざと低いバージョンを使ってた。)

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

url
import
modules
sourceMap
importLoaders
localsConvention
onlyLocals
esModule

一応、ドキュメントを確認しましたが、やっぱりありません。

sass-loaderはデフォルトでminimizeしてくれるので、minimizeオプションを削除するだけで対応できます。

それがなくても、postcss-loaderのcssnanoも入っているので、これで対応すればいいし。

ちなみに、sass-loaderよりもpost-cssのcssnanoのほうがサイズを小さくできる。

というかなんだ?この設定は?

cssnano使ってる時点でcss-loaderのminimizeいらないし。

2年前の自分に聞いてみたい。

前のページ
webpack4, sass-loaderのoutputStyleでエラー
webpack4, CopyWebpackPluginのバージョンアップでエラー
次のページ

JavaScriptの本

post-cta-image

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

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

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


javaScriptの本5選

コメントを残す

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