Laravel Mixで未使用スタイルを削除してCSSを軽量化する

WEB制作
Laravel Mixで未使用スタイルを削除してCSSを軽量化する

Laravel MixでPurgeCSSを使用して、CSSファイルからWebページやアプリで未使用のスタイルを削除する方法を紹介します。

Laravel MixでPurgeCSSを使用するには、laravel-mix-purgecssを使用するとお手軽に設定できます。
目次

インストール

yarn

yarn add laravel-mix-purgecss --dev

npm

npm install laravel-mix-purgecss --save-dev

セットアップ

// webpack.mix.js
const mix = require('laravel-mix');
require('laravel-mix-purgecss');

// ...

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .purgeCss();

Tailwind CSS

Tailwind CSS を使用する場合は以下のようになります。

// webpack.mix.js
const mix = require('laravel-mix');
require('laravel-mix-purgecss');

mix.postCss('resources/sass/app.css', 'public/css')
    .options({
        postCss: [require('tailwindcss')]
    })
    .purgeCss();

参考サイト