背景
最近在使用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
},
}