PurgeCSS with React-bootstrap possible?

Question

I have a gatsby site with react-bootstrap, bootstrap and scss setup and I am trying to clear my unused css. For this I need to use purgeCss, but It doesn't work as it's needed. It seems it can't catch the classes in react-bootstrap components I am using in my pages. I read the documentation, try some fixes, but nothing worked. Can someone help me ?

Hey! did you find a workaround for this? I'm trying to do this in a react project, and even the postbuild configuration isn't working for me! — gigin26
– gigin26, Commented Jun 23, 2020 at 13:49
Just faced the same issue and spent a bit of time in order to understand how the whole thing works. So the purgeCSS actually splits the input into words and then searches for a match in the CSS files. That's why things like Col xs={6} wouldn't work, because the purgeCSS cannot make any sense of it. As a workaround I decided to use plain HTML for grids and for other react-bootstrap components like buttons I just add the class explicitly like <Button className="btn-success" — Andrey Stukalin
– Andrey Stukalin, Commented Sep 22, 2020 at 8:27

borracciaBlu · Accepted Answer · 2020-10-28 07:56:47Z

6

To setup PurgeCSS to allow react-bootstrap classes i've used:

purgeCss: {
    whitelist: () => ['html', 'body', 'collapse', 'collapsing'],
    whitelistPatterns: () => [/modal*/, /accordion*/, /card*/],
    whitelistPatternsChildren: () => [/modal*/, /accordion*/, /card*/]
},

edited Oct 28, 2020 at 7:56

answered Oct 28, 2020 at 2:33

borracciaBlu

4,2353 gold badges38 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James Bond Over a year ago

But you just manually manage whitelist classes, it is not a solution.

Collectives™ on Stack Overflow

PurgeCSS with React-bootstrap possible?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related