Taro V3 编译抛出警告 chunk common [mini-css-extract-plugin]

使用技术

Taro V3、NutUI

问题描述

头天项目编译未提示问题，到今天启动编译时就出现以下日志，在模拟器、真机里测试却未发现对页面有何影响（可能未测试出来）。

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 文件，所以才会抛出警告。

示例：

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

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