Comment désinstaller bootstrap lorsque vous changez de micro frontend ?

Question

<磷>J'ai un problème, lorsque notre équipe utilise React et Bootstra Phosphorus et d'autres modules avec des technologies différentes, ils utilisent Tailwind, donc lorsque le lien de notre micro frontend est remplacé par leur lien, nos styles Bootstra Phosphorus existent toujours, et depuis tailwind et bootstrap ont de nombreux noms de classes mais des options différentes, nous avons maintenant ce problème dans les styles. Donc, ce bootstra _utilities.scss vient de webpack et pour une raison quelconque, même si j'exclus node_modules, peut-être que quelqu'un est confronté à ce problème et connaît la solution au problème ? Voici le chemin lorsque ce scss est mis en surbrillance : webpack://./node_modules/bootstra/scss/mixins/_utilities.scss phosphore <磷>Ma configuration Webpack pour exclure nodu_modules :

<磷>module : { règle:[ { Test : /.(js|ts|tsx)$/, Exclure : /node_modules/, utiliser: { chargeur : 'ts-loader', }, },

Answer 1

Donc, j'ai trouvé la solution, créez d'abord bootstrap.scss séparé dans ce fichier .scss et importez bootstrap.css (dans mon cas, j'ai juste besoin de la grille de bootstrap) :

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

Pour les fichiers sass ou scss, ces paramètres doivent être dans 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',
          ],
        },
...]
}

Ces modifications mettront votre fichier .scss en mode production, le fusionneront en un seul fichier .css et placeront le CSS de Bootstrap dans le style.css exact de votre module.