react-bootstrap + purgeCss + next.js

Question

PurgeCss removes react-bootstrap css classes used in my project. I am using Next.js framework.

_app.js:

import '../styles/style.scss';
import React from 'react';
import PropTypes from 'prop-types';
import 'bootstrap/dist/css/bootstrap.min.css';

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({Component, pageProps}) {
  return <Component {...pageProps} />;
}

MyApp.propTypes = {
  Component: PropTypes.node,
  pageProps: PropTypes.node,
};

component.js:

import React from 'react';
import {Container, Row, Col} from 'react-bootstrap';

const MyTest = function () {
  return (
    <Container>
      <Row>                   // .row class is missing in the final CSS!
        <Col>1 of 2</Col>
        <Col>2 of 2</Col>
      </Row>
      <Row>
        <Col>1 of 3</Col>
        <Col>2 of 3</Col>
        <Col>3 of 3</Col>
      </Row>
    </Container>
  );
};

export default MyTest;

next.config.js:

// next.config.js
const withSass = require('@zeit/next-sass');
const withCss = require('@zeit/next-css');
const withPurgeCss = require('next-purgecss');

module.exports = withCss(
  withSass(
    withPurgeCss({
      generateBuildId: async () => {
        // You can, for example, get the latest git commit hash here
        return 'my-build-id3';
      },
      distDir: 'build',
      purgeCssPaths: [
        './src/pages/*.js',
        './src/pages/**/*.js',
        './src/components/*.js',
        './src/components/**/*.js',
        './src/layouts/*.js',
        './src/layouts/**/*.js',
      ],
    })
  )
);

When I build the app, .row classes and .col classes are completely missing in the CSS file. When disabling PurgeCSS everything works fine.

UPDATE 1#:

Purging of other classes works fine.

Defining Bootstrap classes inside <div> work fine.:

 <button className="btn btn-primary">     // this works fine!
          My Button
 </button>

Other React-bootstrap components dont work either. This doesnt work!

import React from 'react';
import {Button} from 'react-bootstrap';

const MyTest = function () {
  return <Button variant="outline-warning">Primary button</Button>;    // doesnt work
};

export default MyTest;

are the other bootstrap classes working or its just .row and .col? did you tried to include the bootstrap path to the purgeCSSpaths on the config file? — ASG
I've rolled back your edit. It is not appropriate here to edit the solution to the problem into the question itself. If you found an answer and want to share, do so correctly using the answer space below, which is designed for that purpose. For more information, see Can I answer my own question?. Also, please edit your question title to be more than just a repetition of the tags. Your title should describe the problem you're having or question you're asking in a way that will have meaning to a future site user who is scanning search results. — Ken White
glad it works! please can you upvote my comment if it was of a help for you? :) — ASG

ASG ASG · Accepted Answer · 2020-09-13T08:55:35

You should include the path of the bootstrap CSS file to your purgeCSSpath on the config file.

'./node_modules/react-bootstrap/**/*.js',

react-bootstrap + purgeCss + next.js

1 Answers