9

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 ?

George Milev
  • 103
  • 3
  • 1
    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 Jun 23 '20 at 13:49
  • 3
    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 ` – Andrey Stukalin Sep 22 '20 at 08:27

1 Answers1

5

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*/]
},
borracciaBlu
  • 4,017
  • 3
  • 33
  • 41