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として出力する
参考サイト
[webpack]CSS LoaderでCSSの圧縮してる人は最新版でminimizeオプションが削除されてるから気をつけて。|WEBプログラム覚書
CSS Loader 1.0.0 がリリースれさたのはいいが、minimizeオプションが削除されてるのでCSS Loaderで圧縮してる人は最新版で気をつけて。
コメント