🚐

cssnano で CSS の minify をする

2020/12/03に公開

PostCSS

cssnano

tech

cssnano | yarnpkg
- https://yarnpkg.com/package/cssnano

めちゃ簡単

PostCSS が入っていればめちゃ簡単です。
PostCSS 導入に関してはこちらも合わせて参照ください。

2020/11版：TailwindCSS + PostCSS の開発環境を yarn で構築する | 北山淳也 | zenn
- https://zenn.dev/junki555/articles/4a262d03c58c4e993b95

yarn add で入れます

yarn add cssnano --dev

postcss.config.js に追記します

module.exports = (ctx) => ({
  map: ctx.options.map,
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('postcss-nested'),
    require('autoprefixer'),
    /* === ここを追加 === */
    require('cssnano')({
      preset: 'default',
    }),
    /* === */
  ],
})

あとは yarn postcss してやるだけです。

yarn postcss src/**/*.css -d ./public/css

簡単！

今回のものは以下リポジトリに入っています。

なお、cssnano の preset は package化されており、
例えば preset: 'lite' を使うときは
cssnano-preset-lite の package が必要です。
（yarn add した後の node_modules を見ればわかるが、cssnano-preset-default は cssnano と一緒に入る）

Presets | CSSNANO
- https://cssnano.co/docs/presets

※しかし 2020/12/3 現在、cssnano-preset-lite package のPostCSS8対応が済んでいないようで今使おうとするとエラーになります。
　わかってるんだったら自分でプルリク出してどうぞ。はい……。

めちゃ簡単

Discussion