Step 1 Expose configuration:

$ yarn eject
Copy the code

The second step is to implement antD loading on demand:

$ yarn add babel-plugin-import
Copy the code

Modify the package. The json

"babel": {
    "presets": [
      "react-app"]."plugins": [["import",
        {
          "libraryName": "antd"."style": "css"}}]]Copy the code

Step 3 Less introduction:

$ yarn add less less-loader
Copy the code

To modify the webpack.config.js file in config directory is to copy the sass configuration to less and add **+**

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
 + const lessRegex = /\.less$/;
 + const lessModuleRegex = /\.module\.less$/;
Copy the code
            // Adds support for CSS Modules, but using SASS
            // using the extension .module.scss or .module.sass
            {
              test: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'sass-loader'}, + {+test: lessRegex,
           +  exclude: lessModuleRegex,
           +  use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'),
           + },
           + // Adds support for CSS Modules, but using SASS
           + // using the extension .module.scss or .module.sass
           + {
           +  test: lessModuleRegex,
           +  use: getStyleLoaders(
           + {
           +         importLoaders: 2,
           +        modules: true,
           +        getLocalIdent: getCSSModuleLocalIdent,
           + },
           +     'less-loader'+), +},Copy the code

Step 4: theme customization: also in the config directory webpack.config.js file

//if (preProcessor) {
//   ...
// }
+if (preProcessor) {
+     let loader = require.resolve(preProcessor)
+      if (preProcessor === "less-loader") {+ loader = {+ loader, + options: {+ modifyVars: {// Custom theme +'primary-color':' #1890ff ',
+            },
+            javascriptEnabled: true, + } + } + } + loaders.push(loader); +}return loaders;
Copy the code

Modify step 2 under package.json note: The configuration file has comments that may cause errors, so remember to remove the comments when copying

"babel": {
    "presets": [
      "react-app"]."plugins": [["import",
        {
          "libraryName": "antd"."style": true// Change position}]]}Copy the code

Problem: After the Webpack configuration is exposed using YARN eject, the project cannot be started using YARN start again, indicating that a package is missing. Solution: Delete node-modules, use NPM or CNPM to install NPM again