Taro Error: chunk common [mini-css-extract-plugin]

一、问题描述

taro项目编译时抛出一下异常：

Error: chunk common [mini-css-extract-plugin] Conflicting order. Following module has been added: * css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[2]!./node_modules/@nutui/icons-react-taro/dist/style_iconfont.css despite it was not able to fulfill desired ordering with these modules: * css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[2]!./node_modules/@nutui/nutui-react-taro/dist/esm/Space/style/style.css - couldn't fulfill desired order of chunk group(s) pages/test1/index1 - while fulfilling desired order of chunk group(s) pages/test2/index2

查阅资料后得知：

当前警告是由 mini-css-extract-plugin 这个插件抛出的，该插件主要是将 CSS 样式抽离出来到一个文件内，它的特点是不会重复编译 CSS 文件。所以引起这些警告的原因就是我们在项目中引用组件的时候引用的顺序不同，导致该插件遇到了编译过的 CSS 文件，所以才会抛出警告。

用案例阐述问题形成原因：

javascript 复制代码

import React, {useState} from 'react';
import Taro from "@tarojs/taro";
import {Text, View, Image} from '@tarojs/components';
import {IconFont} from "@nutui/icons-react-taro"; // 1
import {Calendar, Cell, Space, Price} from "@nutui/nutui-react-taro"; // 2

const Index1 = () => {
  return <View>Index1 Page</View>
}
export default Index1

javascript 复制代码

import React, {useState} from 'react';
import Taro from "@tarojs/taro";
import {Text, View, Image} from '@tarojs/components';
import {Calendar, Cell, Space, Price} from "@nutui/nutui-react-taro"; // 1
import {IconFont} from "@nutui/icons-react-taro"; // 2

const Index2 = () => {
  return <View>Index2 Page</View>
}
export default Index2

当前项目在编译 Index1、Index2 时就会出现以上错误日志；

二、解决方案

1、将示例中 1、2 两个引用的顺序保持一致即可编译成功。

2、直接修改/config/index.ts的配置：

javascript 复制代码

mini: {
      miniCssExtractPluginOption: {
        ignoreOrder: true
      }
}

加入这个配置项，直接忽略这个检查即可，推荐。