css-loader エラー options should NOT have additional properties

Sass

Webpack4でsassをコンパイルしようとした時にでたエラー

結論として、css-loaderでcssを圧縮しようと付けたminimizeオプションが悪さをしていました。

インストールしたパッケージ

  • webpack 4.29.4
  • webpack-cli 3.2.3
  • mini-css-extract-plugin 0.5.0
  • css-loader 2.1.0
  • postcss-loader 3.0.0
  • sass-loader 7.1.0

 

エラー文

ERROR in ./src/scss/main.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: CSS Loader Invalid Options

options should NOT have additional properties

ウンタラカンタラ・・・・
・・・・・

 Entrypoint mini-css-extract-plugin = *
 [./node_modules/css-loader/dist/cjs.js?!./node_modules/sass-loader/lib/loader.js?!./src/scss/main.scss]
./node_modules/css-loader/dist/cjs.js??ref--4-1!./node_modules/sass-loader/lib/loader.js??ref--4-2!./src/scss/main.scss 
464 bytes { mini-css-extract-plugin } [built] [failed] [1 error]

 

原因

css-loaderで圧縮しようとしたのがよくなかったみたいです。
2.1.0バージョンのcss-loaderではminimizeのオプションが削除されていました。

{
          loader: 'css-loader',
          options: {
              url: false, 
              minimize: true, //圧縮 ここが廃止になり使えなくなりました!
              sourceMap: true
          }
        },

 

 

解決方法

cssを圧縮するプラグインを導入しました。

cssnanoをインストール

npm install --save-dev cssnano

webpack.config.jsを書き換え(抜粋)

{
          loader: 'css-loader',
          options: {
              url: false,
              // minimize: true, // コメントアウトもしくはこの行を消す
              sourceMap: true
          }
        },
        {
          loader: 'postcss-loader',
          options: {
              sourceMap: true,
              plugins: [
                  require('cssnano')({ // cssnanoを導入
                      preset: 'default',
                   })
              ]
          }
        },

 

コピペでsassをcssにコンパイル

sassをコンパイルして、圧縮した状態でcssとして出力する為に、
記述した方法を他の記事に載せました。コピペで動くはず・・・・です。

Webpack4 で Sassをcssとして出力する
Webpack4 で Sassをcssとして出力する

 

 

参考サイト

http://www.kantenna.com/pg/2018/09/webpack_css-loader.php

コメント