CODEWITHSUNDEEP
cssreactjswebpackbootstrap-4next.js
Xalsar
Xalsar

Reputation: 83

How to transform global css into css modules?

I am using react-bootstrap and bootstrap in my nextjs project, thus I have to include the global css:

// _app.js
import 'bootstrap/dist/css/bootstrap.min.css';

The problem is that I load a lot of unused css in every page, thus google lighthouse diminishes my score.

enter image description here

I have tried to purge the unused css, and even thought the score increases, there are still unused styles. I do not need an alert, or a button everywhere. I would like to import only the styles I need in every specific page.

Is there a way to transform global css into css modules so I only import what I need? Maybe some webpack configuration or similar?

I can do it by myself manually splitting the bootstrap code into components. But I would like to know if there is any automatic way of doing it. So I do not have to go through this procedure for all my node_modules that need stylyng.

Upvotes: 0

Views: 286

Answers (1)

franklylately
franklylately

Reputation: 1183

This is one of Bootstrap's cons — outside of eliminating modules from the core bootstrap.scss file and recompiling a unique version, there isn't a way to do this out of the box. (e.g., remove @import "accordion"; from bootstrap.scss to eliminate accordion styles)

In theory, you could compile each import as a separate .scss file and load the .css only when it's needed but there are some nuance interdependencies and would need consideration to ensure some code doesn't duplicate (e.g., variables, reboot, functions)

Inversely, you most likely are only using a few modules (grid.scss, spacing.scss, buttons.scss) and can eliminate all others.

Upvotes: 2

Related Questions