What is the best way to remove bootstrap when transitioning to a new microfrontend?

Our team is facing an issue with styling when using a combination of React, Bootstrap, and Tailwind. The problem arises when linking our micro frontend to modules that use Tailwind, as the Bootstrap styles persist despite the change. Since both Tailwind and Bootstrap have similar class names but different options, we are encountering conflicts in our styling. Specifically, the _utilities.scss file from Bootstrap is being included in Webpack even after excluding node_modules from the config.

If anyone has experience with this issue and knows of a solution, please share. The path for the problematic scss file is: webpack://./node_modules/bootstrap/scss/mixins/_utilities.scss https://i.sstatic.net/nrFbh.png

Here is my webpack configuration for excluding node_modules:

module: { rules: [ { test: /.(js|ts|tsx)$/, exclude: /node_modules/, use: { loader: 'ts-loader', }, },

cssreactjswebpackbootstrap-4

Answer №1

After some research, I managed to find the solution. The first step is to create a separate file for Bootstrap styles called bootstrap.scss and import the necessary Bootstrap grid:

@import 'bootstrap/dist/css/bootstrap-grid.min.css';

In order to properly configure this setup for sass or scss files, make sure to include these settings in your webpack configuration file:

 return merge(filteredConfig, {
    entry: './src/moduleEntry.tsx',
    plugins: [
      new ESLintPlugin({ extensions: ['js', 'jsx', 'ts', 'tsx'] }),
      new MiniCssExtractPlugin({
        filename: `${moduleName}.css`,
      }),
    ],
    module: {
        rules: [
        {
          test: /\.s[ac]ss$/i,
          use: [
            // Creates `style` nodes from JS strings
            !isProduction ? 'style-loader' : MiniCssExtractPlugin.loader,
            // Translates CSS into CommonJS
            {
              loader: 'css-loader',
              options: {
                modules: {
                  auto: true,
                  localIdentName: '[local]-[hash:base64:5]',
                },
              },
            },
            // Compiles Sass to CSS
            'sass-loader',
          ],
        },
...]
}

By making these adjustments, your .scss file will be optimized for production mode, consolidated into a single .css file, and have the Bootstrap CSS included within the style.css specifically for your module.

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 are some ways I can customize the appearance of a Bootstrap 5 Navbar specifically when it is in the collapsed

Currently utilizing Bootstrap 5, my goal is to align the Navbar social icons to the left when the navbar is collapsed for small/mobile devices, and to the right when viewed on a larger screen. Can you assist in identifying which selectors need styling for ...

htmlcsstwitter-bootstrapnavbarbootstrap-5

"Choosing a div element using nth-child() method: a step-by-step guide

An HTML structure was provided which includes a section with an id of "main-content" and a class of "photo-grid". Inside this section are multiple div elements with a class of "col-1-4", each containing a link, paragraph, and image. <section id="main-c ...

htmlcsscss-selectors

What is the purpose of specifying the props type when providing a generic type to a React functional component?

When utilizing the @typescript-eslint/typedef rule to enforce type definitions on parameters, I encountered an issue with generically typing a React.FC: export const Address: React.FunctionComponent<Props> = (props) => ( An error was thrown st ...

reactjstypescript

Installing NPM with the mysterious -E prefix, completely unfamiliar

During the installation of the MATERIAL TAILWIND package, an unfamiliar notation caught my attention in the npm command: npm i -E @material-tailwind/react I'm curious to know what this -E stands for. Any insights would be greatly appreciated. Thanks ...

reactjsnpmpackage

Creating sitemaps for multi domain websites using NextJS

We are implementing a next-sitemap package to generate sitemaps for our Next.js pages located in the /pages directory. For pages that come from the CMS, we use server-sitemap.xml with SSR. Despite having 6 different domains, we manage them within a single ...

javascripthtmlreactjsnext.jsseo

Unable to utilize color palettes from the MUI theme

I'm trying to incorporate the default Material UI theme colors into a custom form element: import * as React from 'react'; import { styled } from '@mui/system'; const MyComponent = styled('div')(({theme}) => ({ colo ...

reactjsmaterial-ui

Is it necessary to specify the declared language in an HTML document?

Is there a way for me to include 'lang="en"' at the end of my opening html tag without manually writing it in? Unfortunately, I don't have direct access to edit the code (ecommerce package), but I want to indicate the site language somehow. ...

jqueryhtmlcssappendlang

Creating a custom component that encapsulates a TextField

I implemented a custom component that adds a '*' at the beginning of any typed text. Here is the code for this component: export default class MyTextField extends Component { constructor() { super(); this.state = { value: & ...

reactjsmaterial-ui

Unable to display the content

Why isn't the text expanding when I click "see more"? Thanks XHTML: <div id="wrap"> <h1>Show/Hide Content</h1> <p> This code snippet demonstrates how to create a show/hide container with links, div eleme ...

javascripthtmlcss

Webpack and Vue.js: Error - Definition missing for template or render function

I am encountering an issue while attempting to load a component in my root Vue instance. The error message I receive is displayed above. Below is the content of the main.js file: "use strict"; require('./../shared/bootstrap'); // loads jquery, ...

webpackvue.js

Selecting the first li element using JQuery selectors

Can anyone help me with creating an onclick event that triggers when the user clicks on the first list item which is labeled as "Any Date"? I am looking to use jQuery to target this specific element. <ul id="ui-id-1" class="ui-menu ui-widget ui-widge ...

javascriptjqueryhtmlcssjquery-ui

Is it possible to pass data retrieved in getStaticProps to a component?

After setting up my getstaticProps: export async function getStaticProps({ params }) { const headerData = await fetch( `https://example.com/get/header-data` ).then((res) => res.json()); return { props: { headerData, }, reva ...

reactjsnext.js

What causes the lack of rerendering for embedded components in React?

I have two components called "Event" and "FormField". The "Event" component has a state variable called "setEvent", which is declared using the useState hook. function Event(props: EventProps) { const [event, setEvent] = useState<EventOut | undefined ...

reactjs

Dependency resolution error: Unable to find a suitable version of react with the specified peer requirements in @material-ui/[email protected] package

I started a new project with React by running npm init -y npm install react react-dom and then attempted to add Material UI: npm install @material-ui/core However, an error occurred: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependenc ...

reactjsmaterial-ui

Exploring JSON Array Data and Its Sub-Properties in React

I have a JSON array containing personal data that I want to access from my React app. This JSON file is already included in my React application. { "person": [ { "id": "userId", "sellerImage": "https://i.pravatar.cc/300", ...

javascriptarraysreactjsobject

Issue with JavaFX: Unable to remove additional space on the right side of TabPane

While developing a full-screen application on JavaFX 2.2 with tab navigation, I encountered an issue where there is a 10px space at the right side of the headers region. Surprisingly, this space only appears after switching to the last tab and disappears w ...

cssuser-interfacetabsjavafx-2tabpanel

A step-by-step guide on building a custom contact form using ReactJS and transmitting the data through an API with Express

In my quest to utilize ReactJS for building a contact form and seamlessly sending the data to my email address, I embarked on creating a contact form within my App.js file. import React, { Component } from 'react'; import axios from 'axios& ...

javascriptnode.jsreactjsapiexpress

Mobile devices are having issues with CSS rendering

I've encountered an issue with my CSS code. It seems to be working fine until the @max-width:767 media query, but then it stops working on the resolution immediately below it, which is @425. However, it starts working again on resolutions below that. ...

htmlcss

The continuity of Material-UI's ripple effect and hover effect extending to a freshly added component

Currently, I am facing a problem with Material-UI's ripple effect when mounting or un-mounting button components. The issue arises when I have buttons that change state, and the displayed button is determined by this state. The issue occurs when I tog ...

reactjsmaterial-ui

Despite granting Camera permission in the Android browser, the Zoom SDK's "ZoomVideo.getDevices()" method is still encountering a "DOMException: Permission denied" error

Currently troubleshooting why I am unable to list any devices on Android's Chrome browser when running the following code: ZoomVideo.getDevices() Upon reaching this line of code, my phone prompts for camera permission. After granting permission by p ...

androidreactjszoom-sdk