Taro: 编译警告 chunk common [mini-css-extract-plugin]

[lmm1990]

相关平台

微信小程序

小程序基础库: 2.13.1
使用框架: Vue 3

复现步骤

npm run dev:weapp

⚠️ 编译警告.

chunk common [mini-css-extract-plugin]
Conflicting order between:

• css ./node_modules/css-loader/dist/cjs.js??ref--1-oneOf-0-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/dist/cjs.js??ref--1-oneOf-0-3!./src/components/radio/radio.scss
• css ./node_modules/css-loader/dist/cjs.js??ref--1-oneOf-0-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/dist/cjs.js??ref--1-oneOf-0-3!./src/components/fixedButton/fixedButton.scss

chunk common [mini-css-extract-plugin]
Conflicting order between:

• css ./node_modules/css-loader/dist/cjs.js??ref--1-oneOf-0-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/dist/cjs.js??ref--1-oneOf-0-3!./src/components/radioGroup/radioGroup.scss
• css ./node_modules/css-loader/dist/cjs.js??ref--1-oneOf-0-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/dist/cjs.js??ref--1-oneOf-0-3!./src/components/fixedButton/fixedButton.scss

chunk common [mini-css-extract-plugin]
Conflicting order between:

• css ./node_modules/css-loader/dist/cjs.js??ref--1-oneOf-0-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/dist/cjs.js??ref--1-oneOf-0-3!./src/components/checkbox/checkbox.scss
• css ./node_modules/css-loader/dist/cjs.js??ref--1-oneOf-0-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/dist/cjs.js??ref--1-oneOf-0-3!./src/components/fixedButton/fixedButton.scss

chunk common [mini-css-extract-plugin]
Conflicting order between:

• css ./node_modules/css-loader/dist/cjs.js??ref--1-oneOf-0-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/dist/cjs.js??ref--1-oneOf-0-3!./src/components/checkboxGroup/checkboxGroup.scss
• css ./node_modules/css-loader/dist/cjs.js??ref--1-oneOf-0-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/dist/cjs.js??ref--1-oneOf-0-3!./src/components/fixedButton/fixedButton.scss

期望结果

该如何解决？

实际结果

编译警告 chunk common [mini-css-extract-plugin]

环境信息

� Taro v3.0.14


  Taro CLI 3.0.14 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 12.18.4 - C:\Users\ADMINI~1\AppData\Local\Temp\yarn--1603453384243-0.7869427061411136\node.CMD
      Yarn: 1.22.4 - C:\Users\ADMINI~1\AppData\Local\Temp\yarn--1603453384243-0.7869427061411136\yarn.CMD
      npm: 6.14.6 - D:\Program Files\nodejs\npm.CMD

Done in 5.00s.

[luckyadam]

https://juejin.im/post/6844903984507912205

[luckyadam]

这种问题可以自己 Google 一下

[lmm1990]

已解决

[whwhz]

已解决
同样遇到了这个警告
请问这边怎么解决的 只是改的顺序吗 我这里改了顺序还是有警告

[lmm1990]

修改引入组件的顺序。
有时并不能真正的解决问题
taro vue3，其实是把组件合并到一个文件中了，你只能控制单个组件中的顺序
如：
a组件 a.vue checkbox.css
b组件 b.vue checkbox.css
index页面
checkbox.css
improt a from '../a.vue'
这样，有可能就会报编译警告

解决办法：
config/index.js
mini: {
enableExtract:true,
miniCssExtractPluginOption: {
//忽略css文件引入顺序
ignoreOrder: true
},
}
即可

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