Nuxt 编译时出现警告 - extract-css-chunks-webpack-plugin

Question

我正在处理一个包含多个文件和文件夹的大型项目。现在，当我运行 npm run dev 或更改页面时，Nuxt 会显示这些烦人的警告。

 WARN  Compiled with 7 warnings                       friendly-errors 11:11:49


 WARN  Error                                          friendly-errors 11:11:49

chunk pages/add-new-property/index.pages/property/index.pages/room-management/add-new/index.pages/signup/index [extract-css-chunks-webpack-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/vuetify-loader/lib/loader.js??ref--16-0!./node_modules/vue-loader/lib??vue-loader-options!./components/property/policies/yes-no-box.vue?vue&type=style&index=0&id=67558805&lang=scss&scoped=true&
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/vuetify-loader/lib/loader.js??ref--16-0!./node_modules/vue-loader/lib??vue-loader-options!./components/UI/checkbox/checkbox.vue?vue&type=style&index=0&lang=scss&
   - couldn't fulfill desired order of chunk group(s) pages/property/index, pages/room-management/add-new/index
   - while fulfilling desired order of chunk group(s) pages/add-new-property/index, pages/signup/index
. . .

这只是 7 个警告之一。

谁能告诉我如何修复或至少忽略 Nuxtjs 中的这些警告？请注意，警告来自 extract-css-chunks-webpack-plugin 而不是来自 mini-css-extract-plugin。

编辑：这个问题只发生在开发中，非常烦人，因为当你第一次加载页面时，样式没有加载。因此，您必须手动刷新页面。但刷新后，如果您再次访问该页面，一切都很好。

Answer 1

您可以在 nuxt.config.js 中添加 ignoreOrder 属性

build: {
    extractCSS: {
      ignoreOrder: true
    }
}

Answer 2

页面/属性/索引，页面/房间管理/添加新/索引 和 pages/add-new-property/index, pages/signup/index

它们都导入了一些组件，但是导入的顺序不同。所以你必须检查这些文件中的导入顺序。

例如文件 a.vue 和 b.vue 有不同的导入顺序：

a.vue:

import CompA from 'xxx'
import CompB from 'yyy'

b.vue

import CompB from 'yyy'
import CompA from 'xxx'

这将导致错误。