How to uninstall bootstrap when you change micro frontend?

Question

<磷> I have a problem, when our team is using react and bootstra phosphorus and other modules with different technologies, they are using tailwind, so when the link of our micro frontend is changed to their link, our Bootstra The phosphorus styles still exist, and because tailwind and bootstra phosphorus have many class names but different options, we now have this problem in the styles. So this bootstrapping _utilities.scss comes from webpack and for some reason even if I exclude node_modules, maybe someone is facing this issue and knows the solution to the problem? This is the path when this scss is highlighted: webpack://./node_modules/bootstra/scss/mixins/_utilities.scss phosphorus <磷>My webpack config for excluding nodu_modules:

<磷>module: { rule:[ { Test: /.(js|ts|tsx)$/, Exclude: /node_modules/, use: { loader: 'ts-loader', }, },

Answer 1

So, I found the solution, first create separate bootstrap.scss in this .scss file and import bootstrap.css (in my case I just need the grid from bootstrap):

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

For sass or scss files, these settings should be in webpack.configuration.js:

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',
          ],
        },
...]
}

These changes will put your .scss file in production mode, merge it into a single .css file, and put the CSS from Bootstrap into your exact module's style.css.