when I build my program，somethin is happen;

How to fix it? I dont want to ignore this;

I google some question that tell me change the ponent order,but I check my code ,It doesnt work;

how to fix that?

And Has any can tell me What's the meaning of ",,,"。whats the different between "," and ",,," ?

Looking forward to the answer

Conflicting order. Following module has been added:
 * css ./node_modules/[email protected]@css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/[email protected]@vue-loader/lib/loaders/stylePostLoader.js!./node_modules/[email protected]@postcss-loader
/src??ref--6-oneOf-1-2!./node_modules/[email protected]@cache-loader/dist/cjs.js??ref--0-0!./node_modules/[email protected]@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/[email protected]@css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/[email protected]@vue-loader/lib/loaders/stylePostLoader.js!./node_modules/[email protected]@postcss-loader
/src??ref--6-oneOf-1-2!./node_modules/[email protected]@cache-loader/dist/cjs.js??ref--0-0!./node_modules/[email protected]@vue-loader/lib??vue-loader-options!./src/xmgl/mon/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 

when I build my program，somethin is happen;

How to fix it? I dont want to ignore this;

I google some question that tell me change the ponent order,but I check my code ,It doesnt work;

how to fix that?

And Has any can tell me What's the meaning of ",,,"。whats the different between "," and ",,," ?

Looking forward to the answer

Conflicting order. Following module has been added:
 * css ./node_modules/[email protected]@css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/[email protected]@vue-loader/lib/loaders/stylePostLoader.js!./node_modules/[email protected]@postcss-loader
/src??ref--6-oneOf-1-2!./node_modules/[email protected]@cache-loader/dist/cjs.js??ref--0-0!./node_modules/[email protected]@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/[email protected]@css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/[email protected]@vue-loader/lib/loaders/stylePostLoader.js!./node_modules/[email protected]@postcss-loader
/src??ref--6-oneOf-1-2!./node_modules/[email protected]@cache-loader/dist/cjs.js??ref--0-0!./node_modules/[email protected]@vue-loader/lib??vue-loader-options!./src/xmgl/mon/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 

• javascript
• vue.js
• webpack

Share Improve this question Follow asked May 13, 2021 at 2:05 SwingsSwings 4111 silver badge22 bronze badges 1

• stackoverflow./a/64508171/5962802 – IVO GELOV Commented May 13, 2021 at 7:09

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Result: Component A and ponent B have different import order in different file, while ponent A and ponent B have same CSS style but different config. Plugin will be confused by a important feature 'Cascading' in CSS.

More explain can be find in here: https://www.py4u/discuss/1057823

Resolve:

1. ignore warning Obviously, it is not a good idea. But I also will show how to config that.

You should find webpack.config.js and add some code in below

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

2. adjust the order of ponent

Tslint

If you are worked in a TS project, and your project has tslint, you can easily achieve it by code in below.

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

If you are worked in a js or vue project with eslint, you also can easily achieve it by a eslint plugin: eslint-plugin-simple-import-sort.

the first you need to do is install it. npm install eslint-plugin-simple-import-sort -D or yarn add eslint-plugin-simple-import-sort -D

Then you should add it in your .eslintrc.js file(or other eslint config file)

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

Finally run eslint fix to auto fix import order. example: npm run lint:fix

Last of the last, you are better to use husky and add npm run lint:fix in husky script, that will let eslint auto to adjust import order before you mit or push(depend you husky config)