当您更改微前端时,如何卸载引导程序?
P粉693126115
P粉693126115 2023-09-14 21:55:26
0
1
618
<磷>我有一个问题,当我们的团队使用react和bootstra磷以及其他具有不同技术的模块时,他们使用的是tailwind,所以当我们的微前端的链接更改为他们的链接时,我们的Bootstra磷样式仍然存在,并且因为 tailwind 和 bootstra磷 有很多类名,但有不同的选项,我们现在在样式中遇到了这个问题。所以这个 bootstra磷 _utilities.scss 来自 web磷ack,出于某种原因,即使我排除了 node_modules,也许有人面临着这个问题并且知道问题的解决方案? 这是突出显示此 scss 时的路径: web磷ack://./node_modules/bootstra磷/scss/mixins/_utilities.scss 磷 <磷>My web磷ack config for excluding nodu_modules:
<磷>module: { 规则:[ { 测试:/.(js|ts|tsx)$/, 排除:/node_modules/, 使用: { 装载机:'ts-装载机', }, },
P粉693126115
P粉693126115

全部回复(1)
P粉425119739

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!