Vue：顺序冲突。添加了以下模块

Question

当我构建我的程序\xef\xbc\x8c时发生了一些事情；

\n

如何修复它？我不想忽视这一点；

\n

我用谷歌搜索了一些问题，告诉我更改组件顺序，但我检查了我的代码，它不起作用；

\n

如何解决这个问题？

\n

有谁可以告诉我“,,,”\xe3\x80\x82的含义是什么“,”和“,,,”之间有什么区别？

\n

期待答案

\n

Conflicting order. Following module has been added:\n * css ./node_modules/_css-loader@3.6.0@css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/_vue-loader@15.9.7@vue-loader/lib/loaders/stylePostLoader.js!./node_modules/_postcss-loader@3.0.0@postcss-loader\n/src??ref--6-oneOf-1-2!./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--0-0!./node_modules/_vue-loader@15.9.7@vue-loader/lib??vue-loader-options!./src/xmgl/contract/supplier/supplier_contract\n_tab.vue?vue&type=style&index=0&id=72731489&scoped=true&lang=css&\ndespite it was not able to fulfill desired ordering with these modules:\n * css ./node_modules/_css-loader@3.6.0@css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/_vue-loader@15.9.7@vue-loader/lib/loaders/stylePostLoader.js!./node_modules/_postcss-loader@3.0.0@postcss-loader\n/src??ref--6-oneOf-1-2!./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--0-0!./node_modules/_vue-loader@15.9.7@vue-loader/lib??vue-loader-options!./src/xmgl/common/vue/print_preview.vue?vue&ty\npe=style&index=0&id=0eed940e&scoped=true&lang=css&\n   - couldn't fulfill desired order of chunk group(s) , , ,\n   - while fulfilling desired order of chunk group(s) ,\n\n warning \n\n

\n

Answer 1

结果：组件A和组件B在不同文件中的导入顺序不同，而组件A和组件B具有相同的CSS样式但配置不同。插件会被 CSS 中的一个重要功能“级联”所迷惑。

更多解释可以在这里找到：https://www.py4u.net/discuss/1057823

解决：

1. 忽略警告显然，这不是一个好主意。但我还将展示如何配置它。

您应该找到 webpack.config.js 并在下面添加一些代码

plugins: [
  new MiniCssExtractPlugin({
    // ......
    ignoreOrder: true
  }),
]

2. 调整组件顺序

茨林特

如果你在 TS 项目中工作，并且你的项目有 tslint，你可以通过下面的代码轻松实现它。

module.exports = {
  // ...
  "ordered-imports": [true, {  
  "import-sources-order": "case-insensitive",  
  "named-imports-order": "case-insensitive",  
  "grouped-imports": true,  
  "groups": [  
    {  
      "name": "react",  
      "match": "^react.*",  
      "order": 10  
   },  
   {  
      "name": "internal modules",  
      "match": "^@",  
      "order": 30  
   },  
   {  
      "name": "relative dir",  
      "match": "^[.]",  
      "order": 40  
   },  
   {  
      "name": "node_modules",  
      "match": ".*",  
      "order": 20  
   }  
  ]  
  }]
}

埃斯林特

如果您在使用 eslint 的 js 或 vue 项目中工作，您也可以通过 eslint 插件轻松实现它：eslint-plugin-simple-import-sort。

您需要做的第一件事就是安装它。 npm install eslint-plugin-simple-import-sort -D 或纱线添加 eslint-plugin-simple-import-sort -D

然后你应该将其添加到你的 .eslintrc.js 文件（或其他 eslint 配置文件）中

module.exports = {
    // ...
    plugins: ["simple-import-sort"],
    rules: {
    // ...
    "simple-import-sort/imports": "error",
}
}

最后运行 eslint fix 以自动修复导入顺序。例子：npm run lint:fix

最后，你最好使用 husky 并添加npm run lint:fixhusky 脚本，这将使 eslint 在你提交或推送之前自动调整导入顺序（取决于你的 husky 配置）