webpack - 与 mini-css-extract-plugin 冲突（我知道，这个问题已经被问过好几次了：-/）

Question

我需要你的帮助！

堆

• 电子，电子网络包，vuejs

• CSS 直接在 .vue 中，进入 a<style lang="scss">中，所以如果我正确阅读了 doc，那么管理的就是 vue-loaderlang="scss"

问题

我的插件有问题mini-css-extract：像很多人一样，我收到“冲突订单警告”。我读了很多，最好的解决方法是重新排序 CSS（因此 .vue 子导入到父 .vue）。

但我被困住了：

• 我尝试使用mini-css-extract插件的 ignoreOrder 选项忽略顺序，但它在 webpack 4 中似乎不再可用。
• 我厌倦了忽略 webpack 配置（ stats.warningFilter ）的错误，但我是 webpack 的新手......所以电子 webpack 后面的魔法卡住了我
• 我尝试重新排序 CSS，因为每个 CSS 样式都放入<style lang="scss">.vue 文件中，我唯一能做的就是更改 .vue 导入的顺序...但是当我在主组件的子组件中添加组件时，我再次有订单警告。

我读到不添加范围或模块<style>不是一个好习惯，但是当我有范围或模块时，它不会改变任何东西。

这让我发疯，我不明白组件的顺序在哪里冲突。如果它对某人有用，我可以提供代码片段，但应用程序很大，而不是我不确定我是否可以重现错误

感谢您的帮助

标签： webpackmini-css-extract-pluginelectron-webpack

Answer 1

像往常一样，问题出在椅子和键盘之间。

如果使用 electron-webpack / vue-loader / vue-router 的人遇到这个问题：您需要将所有 css 块合并为一个，否则 webpack 会为每个路由执行一个块，您可以获得“冲突警告命令”。

你可以通过这种方式配置 webpack：

module.exports = { ... Webpackconfig, optimization: { ...optimization config splitChunks: { cacheGroups: { default: false, // 将所有 CSS 合并到一个文件中（需要避免 mini-css-extra 冲突 order wue wue -router) 样式：{ test: /.s?css$/, chunks: 'all', minChunks: 1, reuseExistingChunk: true, enforce: true, }, }, }, }, };

你也可以这样修改你的路由器 (/*​​ webpackChunkName: "app" */)

export default [ { path: '/installer', name: 'installer', component: () => import(/* webpackChunkName: "app" / '../installer.vue'), }, { path: '/ ', component: () => import(/ webpackChunkName: "app" */ '../main.vue'), }];

但是这种方式你将js和css抓到一个文件中，失去动态加载和性能的优势是降级的