How to transform global css into css modules?

Question

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.

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.

franklylately · Accepted Answer · 2021-12-20 14:47:44Z

2

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.

edited Dec 20, 2021 at 14:47

answered Dec 20, 2021 at 14:36

franklylately

1,18311 silver badges12 bronze badges

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

1 Comment

Xalsar Over a year ago

Yes, but even if I only import in the global stylesheets I need, I will still be importing unused css. I do not need a button (for example) in all my pages. The only solution I find plausible is to manually split bootstrap into components.

Collectives™ on Stack Overflow

How to transform global css into css modules?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related