Transforming global CSS into CSS modules: A step-by-step guide

In my nextjs project, I am utilizing react-bootstrap and bootstrap which requires me to include the global css:

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

The issue arises when loading a significant amount of unused css on every page, causing my Google Lighthouse score to decrease.

https://i.sstatic.net/Egtu3.png

Although I have attempted to remove the unused css, there are still lingering styles that are not necessary. Alerts or buttons appear unnecessarily throughout the site, for example.

Is there a method to convert global css into css modules so that only the required styles are imported for each specific page? Perhaps through webpack configuration or another solution?

I could manually split the bootstrap code into components, but I am curious if there is an automated approach available. This way, I wouldn't have to repeat the process for all node_modules requiring styling adjustments.

cssreactjswebpackbootstrap-4next.js

Answer №1

One downside of Bootstrap is the difficulty in customizing it without removing modules from the core bootstrap.scss file and recompiling a new version. For example, you cannot simply remove @import "accordion"; to eliminate accordion styles.

It may be possible to compile each import as a separate .scss file and load the .css only when necessary, but this approach comes with complexity due to interdependencies that need consideration to avoid duplication of code such as variables, reboot, and functions.

On the other hand, if you are using only a few specific modules like grid.scss, spacing.scss, and buttons.scss, you could easily exclude all others to streamline your project.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React component lacking recognition

Having an issue with my Nav component not getting props. Curiously, 'this.props.history.push' works fine in other components. When trying to call the push function in my Nav component, I receive an error 'err in logout TypeError: Cannot rea ...

reactjsreact-router

What could be causing the issue with object-fit not functioning properly within a container with a max

My goal is to insert a video into a container that has a width of 100% and automatically adjusts its height while maintaining the aspect ratio, but with a maximum height set. I want the video to completely fill the container even if some parts are cropped ...

cssheight

Struggling with z-index or float issues on Chrome and Safari with CSS styling

Check out my website at I have incorporated the Easy Slider 1.7 plugin from this source and made some custom JavaScript modifications for a banner rotator. The issue I am facing is that on webkit browsers, the navigation links (1,2,3,4,5) on the banner a ...

htmlcssgoogle-chromesafariwebkit

Dynamic font sizing in CSS allows text on a webpage to

I am working on creating a dynamic screen using AngularJS. Within this screen, there are objects with a specific size: .item { margin: auto; margin-bottom: 10px; width: 11vw; height: 11vw; text-overflow: ellipsis; overflow: hidden; } These i ...

javascripthtmlcssangularjsionic-framework

Implementing Icons in Material-UI TextField Labels: A Comprehensive Guide

I'm attempting to include Material-UI icons within the TextField component, specifically in the label rather than the input field. For example: While we can use Inputprops to add an icon to the input, I am interested in adding it to the label. How c ...

reactjsinputmaterial-uilabeltextfield

Obtain the unique identifier of the chosen option using material-ui's autocomplete feature

I am currently implementing the autocomplete feature using material-ui. The data in the "customerList" displayed in the search field works fine. However, I am facing an issue with retrieving the "ID" number of the selected data. My goal is to obtain the ID ...

javascriptreactjsautocompletematerial-ui

Removing the arrow icon preceding an image in a new line when dealing with dynamic data

My Angular project renders dynamic content that includes the following HTML structure: <div class="complted" *ngFor="let step of letStep1to7; let i = index; let first = first"> <table> <td class="steps" ...

javascriptcssangularbootstrap-4

Display exclusively the provided value

Can someone please help me with printing in PDF style and displaying only the inputted value without showing the textbox or dropdown? Check out this image for reference I would like to achieve something similar, how can I do that? Any assistance would be ...

htmlcss

Using AJAX to create an interactive dropdown menu with changing options

I have been working on creating a dropdown menu using Ajax. When hovering over the navigation bar, the menu successfully triggers the Ajax function to display the dropdown options. The issue arises when attempting to navigate to another page (show_activi ...

javascripthtmlcssajax

getStaticProps function in Next.js fails to execute

My [slug].js file includes two Next.js helper functions, getStaticPaths and getStaticProps. These functions are exported and create the path posts/[slug]. I have also added a post file named hello.json. However, when I try to access localhost:3000/posts/he ...

javascriptreactjsnext.js

Reveal concealed content when a responsive table becomes scrollable on a mobile device

I recently completed a project that was overloaded with tables. I made all the tables responsive, but they still take vertical scroll if they don't fit on certain devices due to their varying widths. For instance, Table A requires vertical scroll o ...

javascriptjqueryhtmlcsshtml-table

Next.js continues to generate a 404 error page instead of displaying the details of the blog post

I am having trouble with generating my blog details page as I keep getting a 404 error. The data is being fetched from a headless cms called contentful. Below is the structure of my files and code: https://i.stack.imgur.com/kK8B6.png Additionally, here i ...

reactjsnext.jsroutesstaticcontentful

Positional Error Found in Bootstrap Popover Arrow

I'm having an issue with the Bootstrap Popover Tooltip. Can anyone explain why the arrow is not formatting correctly? <div style="display:inline-block;"> <a id="pop" href="#" data-toggle="popover" data-content="<%= user.experience.de ...

jquerycsstwitter-bootstrap

Is Yarn 2.0's zero-install approach better suited for production or development deployments?

Our team is currently transitioning from yarn 1.x to yarn 2 (yarn 3.1.1) and I'm feeling a bit lost when it comes to configuring yarn in our CI/CD setup. Our current pipeline for deploying to our Kubernetes cluster looks like this: On Pull Request br ...

dockerkubernetesnext.jsyarnpkgcicd

The NextJS v10 Image component encounters issues serving images if a basePath is present

I've been attempting to update my application to the most recent version of NextJS (v10). The new Image Component has been introduced (refer to Release notes), but I'm encountering difficulties in properly serving the images when trying to implem ...

next.jsnextjs-image

The Pattern of Communicating Between React Redux Components

Currently seeking an effective code pattern to facilitate communication between components when utilizing React & Redux. Many sources suggest using redux for this communication, as demonstrated in articles such as this one. In certain scenarios, relying ...

reactjsreduxcomponentscommunication

Steps to modernize a legacy React project with the integration of a new Node module

Looking to integrate a new npm package that utilizes hooks and providers into my project based on pre-hook React (16.4.x). Debating whether it's best to upgrade directly to version 16.8.0 for hooks support or go with the latest version available. As f ...

reactjsnode.jsnpmnode-modules

Encountering a Graphql Bad Request when loading the page

Greetings and Festive Wishes to All, I'm currently in the process of developing a website using KeystoneJS and NextJS, with Apollo Client integrated as well. However, I've encountered an issue specifically with Apollo Client. Despite trying var ...

node.jsreactjsnext.jsapollo-clientkeystonejs

Here are steps to dynamically display or hide Formik form fields

I am working on a Formik form that I need to customize. Specifically, I want the sub-category field to be disabled until a category is selected by the user. If no category is picked, the sub-category should remain locked for selection. Can someone guide ...

reactjsformsformik

What are some alternative methods for deploying a Next.js app that do not involve using a Node

I wanted to deploy a Next.js app with a Laravel API. Previously, I had experience developing React apps with CRA and used the API server to serve the index.html of the CRA as the entry point. However, in Next.js, I discovered that it requires a Node.js se ...

reactjslaravelapinext.js