Wie deinstalliere ich Bootstrap, wenn ich das Micro-Frontend ändere?

Question

<磷>Ich habe ein Problem: Wenn unser Team React- und Bootstra-Phosphor und andere Module mit unterschiedlichen Technologien verwendet, nutzen sie Rückenwind. Wenn also der Link unseres Mikro-Frontends in ihren Link geändert wird, sind unsere Bootstra-Phosphor-Stile immer noch vorhanden, und das seitdem Da Rückenwind und Bootstrap viele Klassennamen, aber unterschiedliche Optionen haben, haben wir jetzt dieses Problem bei den Stilen. Dieses Bootstra _utilities.scss stammt also vom Webpack und aus irgendeinem Grund steht vielleicht jemand vor diesem Problem und kennt die Lösung für das Problem, selbst wenn ich node_modules ausschließe? Dies ist der Pfad, wenn dieses SCSS hervorgehoben ist: webpack://./node_modules/bootstra/scss/mixins/_utilities.scss Phosphor <磷>Meine Webpack-Konfiguration zum Ausschließen von nodu_modules:

<磷>Modul: { Regel:[ { Test: /.(js|ts|tsx)$/, Ausschließen: /node_modules/, verwenden: { Lader: 'ts-loader', }, },

Answer 1

所以，我找到了解决方案，首先在这个 .scss 文件中创建单独的 bootstrap.scss 并导入 bootstrap.css （在我的例子中，我只需要 bootstrap 中的网格）：

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

对于 sass 或 scss 文件，这些设置应位于 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',
          ],
        },
...]
}

这些更改将使您的 .scss 文件处于生产模式，将其合并到单个 .css 文件中，并将 Bootstrap 中的 CSS 放入您的确切模块的 style.css 中。