React 16.6.3 eject 实现antd 按需加载和定制主题

目录

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;