Menu
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 ?
677
Using built-in Bootstrap classes and components. Bootstrap can be used directly on elements and components in your React app by applying the built-in classes as you would any other class.
Install React Bootstrap Package The other method to add bootstrap in your React component is adding a package with the inbuilt bootstrap component. These are designed to work with your React application components. Below is the name of two popular packages. Both are good choices for using Bootstrap with React apps.
There are a lot of ways you can use Bootstrap with React. However, they can be a bit of a hassle. Usually, the library would create different React components that simulate Bootstrap components, and you have to import them to use them in your components. Using Tailwind CSS with React is easy.
React. js has inbuilt module of bootstrap i.e. react-bootstrap that can be imported to use bootstrap in the HTML. One can also link to the CDN or import its files to use bootstrap classes.
Not only bootstrap, you can use Purgecss with many css libraries such as TailwindCSS, Zurb foundation,... etc.
Purgecss can be installed with npm package npm i --save-dev purgecss Basically, you run it against your CSS files and your HTML/JavaScript files. It will parse and analyze which CSS content will be used and remove unused CSS content. PurgeCSS can be used as a CLI.
The React component model gives us more control over form and function of each component. Each component is implemented with accessibility in mind. The result is a set of accessible-by-default components, over what is possible from plain Bootstrap.
PurgeCSS can be used as a CLI. This is our project structure, we gonna need to transform CSS files so we have to download bootstrap distro and get file we want to transform. Here is the syntax of CLI command: Since Purgecss is installed in /node_modules we must run this command through npm script.
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*/]
},
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
