2

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 component 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/_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
Swings
  • 31
  • 1
  • 2

1 Answers1

3

Result: Component A and component B have different import order in different file, while component A and component 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.net/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
  }),
]
  1. adjust the order of component

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 commit or push(depend you husky config)

scatter
  • 31
  • 3