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 parce que tailwind et bootstrapping 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, pour une raison quelconque même si

P粉425119739 · Answer

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.