文章/答案/技术大牛

发布

社区首页 >问答首页 >清除- css似乎删除了生产模式中的每个引导css。

问清除- css似乎删除了生产模式中的每个引导css。
EN

Stack Overflow用户

提问于 2022-04-26 13:04:48

回答 1查看 946关注 0票数 1

我正在使用Purgecss删除我的下一个应用程序中未使用的Css。其他第三方库正在使用的是引导，反应引导和引导图标。我听从了

https://purgecss.com/guides/next.html，但它不工作在生产模式。下面是开发模式和生产模式屏幕截图的链接。

发展模式和生产模式

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"]
        }
    ],
]

}

next.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

Stack Overflow用户

发布于 2022-04-27 14:39:35

通过以下方式修改您的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文档中看到缺少的类

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72014486

复制

相似问题

问清除- css似乎删除了生产模式中的每个引导css。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问清除- css似乎删除了生产模式中的每个引导css。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问清除- css似乎删除了生产模式中的每个引导css。
EN