目录

1.安装babel-plugin-import

2.修改package.json

二，定制主题

1.reject项目

2.安装less-loader

3.修改开发环境（webpack.config.dev.js）

4.修改生产环境（webpack.config.prod.js）

前言：

   由于React版本不一致，所以reject后webpack版本也有所不同，因此网上关于该效果的修改处也不同，但理念是一样的。如果不想那么折腾官网也给出了一套不用暴露配置的方法  antd高级配置

1.安装babel-plugin-import

  npm install babel-plugin-import --save-dev或yarn add babel-plugin-import --save-dev

2.修改package.json

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

 提示:如果在package.json中没有看到上面的形式，则需要先 reject项目。

二，定制主题

    由于antd样式使用less开发的，所以我们可以定义全局变量进行覆盖...好了不啰嗦了

1.reject项目

yarn reject 或npm reject

2.安装less-loader

npm install less-loader --save-dev

3.修改开发环境（webpack.config.dev.js）

     3.1定义少全局变量

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
//在这添加
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

     3.2配置less-loader

       
//@To-do 原来的内容
// Adds support for CSS Modules, but using SASS// using the extension .module.scss or .module.sass{test: sassModuleRegex,use: getStyleLoaders({importLoaders: 2,modules: true,getLocalIdent: getCSSModuleLocalIdent,},'sass-loader'),},//@To-do 添加如下内容{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'),},

     3.3定义全局样式

//@To-Do 注释原来内容  
// if (preProcessor) {//   loaders.push(require.resolve(preProcessor));// }//@To-do 新添加内容if (preProcessor) {let loader = require.resolve(preProcessor)if (preProcessor === "less-loader") {loader = {loader,options: {modifyVars: { //自定义主题'primary-color':' #1890ff ',},javascriptEnabled: true,}}}loaders.push(loader);}return loaders;

  3.4修改package.json

 "babel": {"presets": ["react-app"],"plugins": [["import",{"libraryName": "antd","style": true  //修改处}]]}

注意：关于为何要style = true ，请看这里 

4.修改生产环境（webpack.config.prod.js）

   4.1定义少全局变量

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
//在这添加
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

4.2配置less-loader 

       
//@To-do 原来的内容
// Adds support for CSS Modules, but using SASS// using the extension .module.scss or .module.sass{test: sassModuleRegex,use: getStyleLoaders({importLoaders: 2,modules: true,getLocalIdent: getCSSModuleLocalIdent,},'sass-loader'),},//@To-do 添加如下内容{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'),},

4.3定义全局样式

//原来的   
// if (preProcessor) {//   loaders.push({//     loader: require.resolve(preProcessor),//     options: {//       sourceMap: shouldUseSourceMap,//     },//   });// }//自定义配置if (preProcessor) {let loader = {loader: require.resolve(preProcessor),options: {sourceMap: shouldUseSourceMap,},}if (preProcessor === "less-loader") {loader.options.modifyVars = {'primary-color': '#1890ff ',}loader.options.javascriptEnabled = true}loaders.push(loader);}return loaders;