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.

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

What is the method for implementing a distinct background in dark mode while utilizing Material UI Themes?

I am facing an issue with changing the background color when in dark mode. Here is my initial code snippet... export const myThemeOptions: ThemeOptions = { palette: { mode: "light" as PaletteMode, primary: { main: ...

cssmaterial-uithemes

Changing direction of arrow upon dropdown menu opening with JavaScript

I have developed a piece of code that enables users to click on a div in order to reveal a dropdown menu containing radio buttons. My goal is to make the arrows rotate 180 degrees when the dropdown menus are opened, and then return to their original positi ...

javascripthtmlcss

Execute webpack bundling as part of the docker-compose build procedure

I'm in the process of constructing a production docker container containing minified versions of my js files. Within my Dockerfile, post npm packages installation, I aim to initiate the webpack compilation. RUN npm install -g n # update npm version ...

dockernpmwebpackdocker-composenpm-install

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

Prevent border duplication in CSS and retain border visibility

Check out this fiddle where I have three divs with a border-width of 2px. Originally, the issue was that each div's border gets duplicated in between, resulting in a total border-width of 4px. To solve this, I applied a margin-top of -2px to each div, ...

htmlcssborder

The MUI static datepicker sx property is malfunctioning

I am trying to deactivate the default action buttons in the mui datepicker by using the sx props, but for some reason it's not working properly This is the code I have implemented for the datepicker component: <LocalizationProvider dateAdapter={Ad ...

reactjsmaterial-uidatepicker

Altering the style of the underline for a hyperlink

I'm looking to customize the underline style when hovering over a link. Specifically, I want to change the color and size of the underlined link. const useStyles = makeStyles(theme => ({ button: { marginLeft: theme.spacing(2), }, }) ...

cssmaterial-ui

Tips on formatting text as bold or italic when tweeting from my website to our Twitter account

Currently, I am utilizing the Twitter OAuth library in conjunction with PHP to publish a tweet from my website directly to my Twitter account. My main objective is to highlight some text while posting, however, I have not been successful in identifying t ...

phphtmlcsstwitter

Setting the path to an image component using the style jsx tag in Next.js: A step-by-step guide

While utilizing jsx to define styles for my NextJs components, I am facing the challenge of defining a background image for certain elements. I have realized that only relative paths or absolute paths are accepted. But how can I pass a relative path to th ...

cssreactjsjsxnext.js

What is the best way to merge an array of objects into a single object?

Is there a way to dynamically convert object1 into object2, considering that the keys like 'apple' and 'water' inside the objects are not static? const object1 = { apple:[ {a:''}, {b:'&apos ...

javascriptreactjstypescriptnext.js

Align text vertically next to an image

I am facing a challenge with aligning text vertically next to an image floated left. I have tried various solutions recommended on different platforms, but none seem to work for me. Despite following the suggestions provided in this particular solution, I ...

htmlcss

How can I customize the styling of Autocomplete chips in MUI ReactJS?

Trying to customize the color of the MUI Autocomplete component based on specific conditions, but struggling to find a solution. Any ideas? https://i.stack.imgur.com/50Ppk.png ...

javascriptcssreactjsmaterial-ui

Sending state properties to components within a route

In my React structure, I have the following setup: <Provider store={ store }> <Router> <Switch> <Route path="/how-to" component={ Help } /> <Route path="/start" c ...

javascriptreactjsreduxreact-redux

How to effectively leverage useMediaQuery in material ui?

Upon completing the web application, I have made the decision to ensure it is mobile-friendly. Utilizing the material UI framework with react, I delved into the documentation but found myself uncertain about how to effectively implement it. Let me provide ...

javascriptreactjsmaterial-ui

Problem with Material UI Autocomplete Chip's onDelete Function Not Functioning

While attempting to integrate an Autosuggest feature using Material UI, I encountered an issue. When utilizing a custom SVG on the chip as the deleteIcon, the onDelete functionality ceases to work. import React, {useState, useEffect} from 'react' ...

reactjsmaterial-ui

Tips for utilizing CSS to position a semi-circle in the middle of an image

Can CSS create a half circle effect on any image? I want to achieve a half circle effect in an image using CSS. Is this possible or not? ...

css

Experimenting with Typescript, conducting API call tests within Redux actions, mimicking classes with Enzyme, and using Jest

I am facing an issue where I need to mock a class called Api that is utilized within my redux actions. This class is responsible for making axios get and post requests which also need to be mocked. Despite following tutorials on how to mock axios and class ...

reactjstypescriptunit-testingreact-reduxjestjs

Building a Search Bar with React utilizing NextJS framework

Seeking assistance in pinpointing the issue with my code. This application is an Employee Search tool utilizing the new APP directory with NextJS. Functioning features: Includes an input field for filtering and capturing user input. The API endpoint retu ...

reactjsnext.js

Text input fields within a grid do not adjust to different screen sizes when placed within a tab

I noticed that my component under a tab is causing the Textfield to become unresponsive on small screens. To demonstrate this, I checked how the Textfield appears on an iPhone 5/SE screen size. https://i.stack.imgur.com/d8Bql.png Is there a way to make t ...

javascriptreactjsmaterial-ui

Struggling to properly implement background images in a React application using Tailwind CSS

I'm currently developing a React application using Tailwind CSS for styling. In my project, I have an array of items called "trending," and I'm attempting to iterate through them to generate a series of divs with background images. However, I am ...

cssreactjstypescripttailwind-css