2

当我构建我的程序时，发生了一些事情；

如何解决？我不想忽略这一点；

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

如何解决？

有没有人可以告诉我“,,”是什么意思。“,”和“,,”有什么区别？

期待答案

Conflicting order. Following module has been added:
 * 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
/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
_tab.vue?vue&type=style&index=0&id=72731489&scoped=true&lang=css&
despite it was not able to fulfill desired ordering with these modules:
 * 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
/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
pe=style&index=0&id=0eed940e&scoped=true&lang=css&
   - couldn't fulfill desired order of chunk group(s) , , ,
   - while fulfilling desired order of chunk group(s) ,

 warning
4

1 回答 1

0

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

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

解决：

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

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

plugins: [
  new MiniCssExtractPlugin({
    // ......
    ignoreOrder: true
  }),
]
  1. 调整组件的顺序

茨林特

如果您在 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 auto 在你提交或推送之前调整导入顺序（取决于你的 husky 配置）

于 2022-01-08T06:33:25.523 回答