我正在参加「掘金·启航计划」
背景
在一次代码构建打包时候，报错如下：
问题原因
因为项目中中引用了mini-css-extract-plugin这个插件。 mini-css-extract-plugin是一个将CSS文件 extracts(分离)到单独文件中的webpack插件。它允许将 CSS 提取到单独的 CSS 文件中,而不是在 JavaScript 打包文件中内嵌。
如果import的文件排序有问题就会导致Conflicting order. 的报错
解决问题
定位位置。
根据报错信息可以定位到我们import错的文件名为：Rank.vue
同时根据报错信息定位import这个文件的文件是：whitescreen模块
解决办法
进入我们的whitescreen文件发现这两个improt是可以合并成为一句的。
import Rank from './components/Rank'
import { WSOverviewList, WSPageList, WSPageDetail, DevicePie } from './components'
所以直接改成如下一行代码就可以了
import { Rank, WSOverviewList, WSPageList, WSPageDetail, DevicePie } from './components'
另外
除了前面提到的原因外,在Vue项目中使用mini-css-extract-plugin也可能导致这个错误。mini-css-extract-plugin是一个将CSS文件 extracts(分离)到单独文件中的webpack插件。它允许将 CSS 提取到单独的 CSS 文件中,而不是在 JavaScript 打包文件中内嵌。使用这个插件可能会导致"Conflicting order"错误的原因有:1. mini-css-extract-plugin的版本与webpack版本不兼容。这会导致webpack解析import语句时出现错误。解决方法是升级/降级mini-css-extract-plugin至与webpack兼容的版本。2. 同时使用了mini-css-extract-plugin和style-loader。这会导致CSS被提取到文件和内嵌到JS文件中,产生冲突。解决方法是只选择其中一种方式,不要同时使用mini-css-extract-plugin和style-loader。3. mini-css-extract-plugin的配置选项中使用了错误的loader选项。这会导致webpack解析import模块时出错。解决方法是检查mini-css-extract-plugin的配置,确定loader选项与项目webpack config匹配。4. 升级/安装了mini-css-extract-plugin并未重新构建项目。解决方法是在升级/安装mini-css-extract-plugin后,需要重新运行构建命令:
bash
npm run build // 如果使用npm构建
yarn build // 如果使用Yarn构建
重新构建项目可以重新解析webpack配置和依赖,消除版本更新带来的问题。除此之外,和前面提到的Vue本身的版本问题相同,也要确保:- mini-css-extract-plugin的版本与项目Vue版本兼容
- 只有一个版本的mini-css-extract-plugin被导入综上,在使用mini-css-extract-plugin的Vue项目中,版本兼容和配置匹配的问题也容易导致“Conflicting order”错误。确保依赖的版本一致,配置选项正确,并在更新依赖后重新构建,可以有效解决这个错误。
