Methods a

Compile antD styles and CSS in the project separately in webPack config

Matching antD styles exactly, CSS moDual is not enabled for ANTD styles

{ test: /\.css$/i, exclude:[/node_modules/], use: [ MiniCssExtractPlugin.loader, { loader: "css-loader", options: { modules: { exportGlobals: false, localIdentName: "The [local] __ [hash: base64]",,}},},],}, / / matching antd CSS, not enable CSS modual {$/ test: / \. CSS, include: [/[\\/]node_modules[\\/].*antd/], use: [ // MiniCssExtractPlugin.loader, {loader: 'style-loader'}, {loader: 'css-loader'} ] },Copy the code

Introduce the ANTD style in the root file

import 'antd/dist/antd.css';
Copy the code

Method 2

In the WebPack configuration file

      {        test: /\.css$/i,        oneOf: [{          resourceQuery: /^\?raw$/,          use: [              require.resolve('style-loader'),              require.resolve('css-loader')          ]      },         use: [          MiniCssExtractPlugin.loader,          {            loader: "css-loader",            options: {              modules: {                exportGlobals: false,                localIdentName: "[local]__[hash:base64]",              },            },          },        ],      },
Copy the code

Introducing antD is plus? raw

import 'antd/dist/antd.css? raw';Copy the code

The pattern comes out