Purge-css 似乎在生产模式下删除了每个引导程序 css答案

【问题标题】：Purge-css seems to remove every bootstrap css in production modePurge-css 似乎在生产模式下删除了每个引导程序 css
【发布时间】：2023-02-06 00:45:08
【问题描述】：

我正在使用 Purgecss 删除我下一个应用程序中未使用的 Css。我使用的其他第三方库是 Bootstrap、react-bootstrap 和 bootstrap-icons。我按照指示从
https://purgecss.com/guides/next.html 但它在生产模式下不起作用。以下是开发模式和生产模式的屏幕截图链接。

dev mode 和 production mode

postcss.config.js

module.exports = {
"plugins": [
    "postcss-flexbugs-fixes",
    [
        "postcss-preset-env",
        {
            "autoprefixer": {
                "flexbox": "no-2009"
            },
            "stage": 3,
            "features": {
                "custom-properties": false
            }
        }
    ],
    [
        '@fullhuman/postcss-purgecss',
        {
            content: [
                './pages/**/*.{js,jsx,ts,tsx}',
                './components/**/*.{js,jsx,ts,tsx}',
                './node_modules/bootstrap/dist/**/*.css"'
            ],
            defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
            safelist: ["html", "body"]
        }
    ],
]

}

下一步.config.js

 /** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = nextConfig

_app.js

import 'bootstrap/dist/css/bootstrap.css'
import "bootstrap-icons/font/bootstrap-icons.css";
import '../styles/globals.css'
import Head from "next/head";

function MyApp({Component, pageProps}) {
    return (
        <>
            <Head>
                <meta name="viewport" content="width=device-width, initial-scale=1"/>
            </Head>
            <Component {...pageProps} />
        </>
    );
}

export default MyApp;

为什么会这样？

【问题讨论】：

标签： css next.js react-bootstrap

【解决方案1】：

通过以下方式修改您的 next.config.js

  purgeCssPaths: [
    'node_modules/react-bootstrap/**/*.js'
  ],

 // also you can try to make white lists

  purgeCss: {
    whitelist: () => [
      'modal',
      'modal-dialog',
      'modal-xl',
      ...
    ],
    whitelistPatterns: () => [/modal*/, /accordion*/, /card*/],
    whitelistPatternsChildren: () => [/modal*/, /accordion*/, /card*/]
  }

如果仍然删除了某些类，请尝试以下操作：这并不完全正确，但您可以使用 PurgeCSS 删除的所有必要类（模态窗口、旋转木马等）创建一个单独的伪组件。您可以在 Bootstrap 文档中看到缺少的类

【讨论】：

【解决方案2】：

您也可以告诉 PurgeCss 查看 Bootstrap js 文件以获取所需的类

作为一个例子，我的 vite.config.js 看起来像这样：

purgecss({
            content: ['resources/**/*.php',
                      'resources/**/*.js',
                      'resources/**/*.vue',
                      'node_modules/bootstrap/js/**/*.js']
        }),

如您所见，我添加了所有 bootstrap js 源文件以查找所需的类。

【讨论】：