Viteを使用して作成されたReactアプリでPurgeCSSを組み込む場合、設定はWebpackベースのプロジェクトとは異なります。
Viteは、デフォルトでRollupまたはesbuildを使ってバンドルを行うため、Webpackのプラグインを直接使用することはできません。
しかし、PostCSSを介してPurgeCSSを使用することができます。
npm i -D postcss postcss-cli @fullhuman/postcss-purgecss
vi postcss.config.js
postcss.config.js
import purgecss from '@fullhuman/postcss-purgecss';
export default {
plugins: [
purgecss({
variables:true, // true: delete unused variables
safelist: { // safelist
standard: ['html', 'body'],
},
content: [
'YOUR/DIR/bigsize.css',
'./src/**/*.tsx',
'./src/**/*.jsx',
],
}),
],
};
オプションはこちら
https://purgecss.com/plugins/postcss.html
ViteはデフォルトでPostCSSをサポートしており、プロジェクトのルートディレクトリにpostcss.config.jsまたはpostcss.config.cjsファイルを配置することで、PostCSSの設定を行うことができます。
https://www.linkedin.com/pulse/removing-unused-css-purgecss-hasibul-islam
postcss は next.js が元々持っているので、インストール不要です。
パッケージのインストール
npm i -D @fullhuman/postcss-purgecss
npm i -D postcss-flexbugs-fixes postcss-preset-env
// postcss.config.js
module.exports = {
plugins: [
// restore the Next.js default behavior
"postcss-flexbugs-fixes",
[
"postcss-preset-env",
{
autoprefixer: {
flexbox: "no-2009",
},
stage: 3,
features: {
"custom-properties": false,
},
},
],
[
// configure PurgeCSS
"@fullhuman/postcss-purgecss",
{
content: ["./src/app/**/*.{js,jsx,ts,tsx}"],
defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
safelist: {
standard: ["html", "body"],
},
},
],
],
};