时间戳

首页 > 解决方案 > React Webpack，不要在标题中加载额外的 CSS

javascript - React Webpack，不要在标题中加载额外的 CSS

问题描述

我有一种微前端反应应用程序，我正在与突变观察者一起工作，它还预先加载了所有必要的 CSS。但是一旦标头加载，嵌入式应用程序的 webpack v4.42.1 会使用错误的主机（不正确的端口/相对路径）注入额外的 CSS。

<head>
<link rel="stylesheet" type="text/css" href="http://localhost:55000/dist/5.b370e2fba4e250a84d7e.css">
<link rel="stylesheet" type="text/css" href="/dist/5.b370e2fba4e250a84d7e.css"><!-- << Bad Line -->
</head>

我们正在使用 Webpack 的MiniCssExtractPlugin，我认为这就是导致这个问题的原因，但不是 100% 肯定，我们的 CSS 加载器（放入模块：规则：）是：

const getCSSLoader = () => ({
    test: /\.(sc|sa)ss$/,
    use: [
        {
            loader: MiniCssExtractPlugin.loader
        },
        {
            loader: 'css-loader',
            options: {
                sourceMap: false
            }
        },
        {
            loader: 'postcss-loader',
            options: plugins: function() {
            return [require('autoprefixer')];
            }
        },
        {
            loader: 'sass-loader',
            options: {
                sourceMap: false
            }
        }
    ]
});

这第二个 CSS 文件是完全没有必要的，因为它已经被加载了。这是一个由我们 SASS 目录之外的所有松散 CSS 文件捆绑在一起的文件组成的文件。它似乎在页面加载的最后几秒钟将其附加到标题的底部。我尝试使用MiniCssExtractPlugin'sinsert:选项，但它似乎没有任何效果。

是否可以避免注入此文件？或者至少修改主机？

标签： javascriptreactjswebpacksassmicro-frontend

解决方案

推荐阅读