webpack插件提取css警告冲突antd如何解决

Question

WARNING in chunk vendors [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader!./node_modules/postcss-loader/src!./node_modules/antd/lib/select/style/index.css
 * css ./node_modules/css-loader!./node_modules/postcss-loader/src!./node_modules/antd/lib/tooltip/style/index.css
 * css ./node_modules/css-loader!./node_modules/postcss-loader/src!./node_modules/antd/lib/modal/style/index.css
 * css ./node_modules/css-loader!./node_modules/postcss-loader/src!./node_modules/antd/lib/icon/style/index.css
 * css ./node_modules/css-loader!./node_modules/postcss-loader/src!./node_modules/antd/lib/grid/style/index.css
 * css ./node_modules/css-loader!./node_modules/postcss-loader/src!./node_modules/antd/lib/input/style/index.css
 * css ./node_modules/css-loader!./node_modules/postcss-loader/src!./node_modules/antd/lib/message/style/index.css
 * css ./node_modules/css-loader!./node_modules/postcss-loader/src!./node_modules/antd/lib/auto-complete/style/index.css

webpack4
虽然警告,但是好像不影响

const styleLoader = devMode ? "style-loader" : MiniCssExtractPlugin.loader;
{
        test: /\.css$/,
        use: [styleLoader, "css-loader", "postcss-loader"]
      },
      {
        test: /\.less$/,
        use: [{
          loader: styleLoader
        }, {
          loader: "css-loader"
        }, {
          loader: "postcss-loader"
        }, {
          loader: "less-loader"
        }]
      },
      {
        test: /\.scss$/,
        use: [{
          loader: styleLoader
        }, {
          loader: "css-loader"
        }, {
          loader: "postcss-loader"
        }, {
          loader: "sass-loader"
        }]
      },
     babel配置 
   "plugins": [
    ["import", 
      {
        "libraryName": "antd",
        "style": "css"
      },
      "loadsh"
    ],
    "@babel/plugin-transform-modules-commonjs",
    "@babel/plugin-proposal-class-properties"
  ]

Answer 1

We are trying to generate a CSS file but your codebase has multiple possible orderings for these modules.

In this case you used table before button in one location and button before table in another > > location. We need to generate a single CSS file for these and can't decide which one should be first. In this case we put table before button. But this is chosen without reason. In future build we may decide the other way. But since CSS cares for rule order this can lead to issue when CSS changes without reason.

So not defining a clear order can lead to fragile builds, that's why we display a warning here.

There are two things that you can do:

Sort your imports to create a consistent order. I must admit that the warning could be improved to point to the locations that need to be changed.

Ignore the warning with stats.warningFilter when the order of these styles doesn't matter. Maybe the eventually add an option to mark order-independent styles directly.

github

Answer 2

这个警告其实可以忽略的，因为我们才不管css在不同文件的加载顺序，特别是老项目，基本都是乱的。
所以，解决方案就是在开发模式下忽略这个警告：

• 安装 webpack-filter-warnings-plugin

npm i webpack-filter-warnings-plugin -D

• 修改 webpack.config.js，添加忽略用的插件

const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');

...

plugins: [
    ...
    new FilterWarningsPlugin({
        exclude: /mini-css-extract-plugin[^]*Conflicting order between:/,
    }),
    ...
]

Answer 3

{
    "libraryName": "antd",
    "style": "css"
}

style的值改为true试试

Answer 4

同学， 你最后解决了嘛，