具体现象

今天照常编译trao项目

taro build --type weapp --watch

结果报了个警告 image.png

原因

尽管不影响项目运行,但是拥有终端洁癖的我不能容忍它的出现,于是只好度娘一下 原来这个错误是mini-css-extract-plugin这个插件抛出的，该插件主要是将 CSS 样式抽离出来到一个文件内，它的特点是不会重复编译 CSS 文件。 引起这些警告的原因就是我们在项目中引用组件的时候引用的顺序不同，导致该插件遇到了编译过的 CSS 文件，就会抛出警告。

举个例子

页面A中引入的组件顺序
import { Dongdong } from "@nutui/icons-vue-taro";
import { Button } from "@nutui/nutui-taro";
页面B中引入的组件顺序
import { Button } from "@nutui/nutui-taro";
import { Dongdong } from "@nutui/icons-vue-taro";

页面B的组件引入顺序和页面A中的不一样，这个时候就会抛出警告

解决方案

方案一

既然顺序不一样,那你把它们的顺序手动调整一下不就得了,但是开发的时候都是自动引入的多谁会这么强迫症呀

方案二

在Trao配置中配置一下就好了，路劲为：config/**.js,就是config文件夹下的配置文件,一般有3个不同环境的,博主主要使用dev 所以就直接修改config/dev.js文件

mini: {
    miniCssExtractPluginOption: {
      ignoreOrder: true
    }
 }

image.png