如何解决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
的 insert:
选项,但似乎没有任何效果。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。