HOME>WEBプログラム覚書>[webpack]CSS LoaderでCSSの圧縮してる人は最新版でminimizeオプションが削除されてるから気をつけて。

[webpack]CSS LoaderでCSSの圧縮してる人は最新版でminimizeオプションが削除されてるから気をつけて。

なんか圧縮されないと思ったら1.0.0で minimize オプションが削除されていた。

remove minimize option, use postcss-loader with cssnano or use optimize-cssnano-plugin plugin

Release v1.0.0 · webpack-contrib/css-loader · GitHub

こんな感じで設定している人は、今後要注意。

webpack.config.js 抜粋

  1. {
  2.     loader: 'css-loader',
  3.     options: {
  4.         url: false,
  5.         minimize: true, // <= このオプションは削除された
  6.         sourceMap: true
  7.     }
  8. }

CSSの圧縮は今後はcssnanoを使うといいんじゃね的な。

webpackのCSS圧縮設定

ともかく cssnano をインストールしての post-css プラグインとして利用する。

cssnano インストール

  1. npm install --save-dev cssnano

webpack.config.js 抜粋

  1. {
  2.     loader: 'postcss-loader',
  3.     options: {
  4.         sourceMap: true,
  5.         plugins: [
  6.             require('cssnano')({
  7.                 preset: 'default',
  8.             }),
  9.             require('autoprefixer')({
  10.                 grid: true,
  11.                 browsers: ['IE 11', 'last 2 versions']
  12.             })
  13.         ]
  14.     },
  15. },

という感じで設定してあげると圧縮される。

参照サイト

投稿日 2018年9月 2日 04:25
カテゴリ HTML/CSS
タグ webpack | 設定
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1790

コメント

コメントする
Name
Email Address
URL