The webpack plug-in extracts css warning conflicts how to resolve antd

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"
  ]
Webpack4
Aug.20,2021

this warning can actually be ignored, because we don't care that css is basically messy in the loading order of different files, especially old projects.
so, the solution is to ignore this warning in development mode:

  • install webpack-filter-warnings-plugin 
npm i webpack-filter-warnings-plugin -D
  • modify webpack.config.js to add a plug-in for ignore 
const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');

...

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

Previous: Use xpath to get the value of the node as None

Next: The relationship among screen width, browser width, html width and body width

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu