Taro编译警告:chunk common [mini-css-extract-plugin] Conflicting order between *.css

3,926 阅读1分钟

背景

最近在使用Taro开发小程序,前期还是很顺畅的,突然某一天发现编译报出一堆警告,chunk common [mini-css-extract-plugin] Conflicting order between *.css。

寻求解决方案

这个报错为Css冲突,突然而出的问题,一顿检查,我的CSS没有冲突啊。

网上提供的解决办法:调整组件引入顺序。 如:

a组件 a.vue checkbox.css
b组件 b.vue checkbox.css
index页面
checkbox.css
improt a from '../a.vue'
improt b from '../b.vue'

然而实操过程中发现并不能真正解决问题。因为taro vue3,其实是把组件合并到一个文件中了,你只能控制单个组件中的顺序。

注意事项:组件的样式需要包裹起来,否则有可能造成css污染

最终解决方案

忽略调编译时的CSS顺序问题,即可最终解决问题

config/index.js
mini: {
    enableExtract:true,
    miniCssExtractPluginOption: {
        //忽略css文件引入顺序
        ignoreOrder: true
    },
}