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

Question

Ich habe ein Problem: Wenn unser Team Reaktions- 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 weil Da Rückenwind und Bootstrapping viele Klassennamen, aber unterschiedliche Optionen haben, haben wir dieses Problem jetzt bei den Stilen. Aus irgendeinem Grund stammt diese Datei „bootstra_utilities.scss“ also vom Webpack

P粉425119739 · Answer

所以，我找到了解决方案，首先在这个 .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 中。