'Purge-css seems to remove every bootstrap css in production mode

I am using Purgecss to remove unused Css on my next application. Other third party libraries am using are Bootstrap, react-bootstrap and bootstrap-icons. I followed the instructions from
https://purgecss.com/guides/next.html but it does not work in production mode. Below are links to screenshots for both dev mode and production mode.

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

}

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;

why is it behaving that way?

cssnext.jsreact-bootstrap


Solution 1:[1]

Modify your next.config.js by following

  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*/]
  }

If some classes are removed anyway, try following: This is not entirely correct, but you can make a separate fake component with all the necessary classes that the PurgeCSS removes (modal window, carousel, and so on). You can see the missing classes in the Bootstrap documentation

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 olegoriginal

Related Questions