react脚手架、webpack按需引入antd + 配置主题

---

按需引入antd

---

这个说的是antd3.x的版本

使用脚手架创建完项目后，接着来安装antd：npm install antd --save
按照官方说的，接着在引入样式：import 'antd/dist/antd.css'

这样当然是不推荐的，默认就把他全部的样式引入了，体积增加了不少，推荐使用 customize-cra、react-app-rewired、babel-plugin-import

首先安装这三个依赖：npm install customize-cra react-app-rewired babel-plugin-import --save-dev

在package.json下修改命令，将react-scripts都替换为react-app-rewired，eject命令替不替换都无所谓

然后在根目录下新建config-overrides.js进行修改webpack的默认配置，customize-cra是修改配置的，react-app-rewired是启动命令库

随后在对应的js文件中就不用再次引入css文件了，终端输入：npm start运行项目

配置主题色只需要安装相应的less，修改一下config-overrides.js即可
安装less相关依赖：npm install less less-loader --save-dev

 const { override, fixBabelImports } = require('customize-cra');

 
 module.exports = override(
   fixBabelImports('import', {
     libraryName: 'antd',
     libraryDirectory: 'es',
     style: true,
   }),
   addLessLoader({
	 javascriptEnabled: true,
	 modifyVars: { '@primary-color': 'red' },
   }),
 )

antd4.x配置

在4.x中官方推荐我们使用craco+bebel-import-plugin
安装craco：npm install @craco/craco --save

修改package.json命令，将react-scripts替换为craco

然后在项目根目录创建一个 craco.config.js 用于修改默认配置

const CracoLessPlugin = require('craco-less')

module.exports = {
    babel: {
        plugins: [['import', {
            libraryName: 'antd',
            libraryDirectory: 'es',
            style: 'css',
        }]],
    },
    plugins: [
        {
          plugin: CracoLessPlugin,
          options: {
            lessLoaderOptions: {
              lessOptions: {
                modifyVars: { '@primary-color': 'red' },
                javascriptEnabled: true,
              },
            }
          }
        }
    ],
}

随后在app.js引入样式

webpack方式定制主题

以4.x版本为例

// webpack.config.js
module.exports = {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader', // translates CSS into CommonJS
    }, {
      loader: 'less-loader', // compiles Less to CSS
     options: {
       lessOptions: { // 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。
         modifyVars: {
           'primary-color': '#1DA57A',
           'link-color': '#1DA57A',
           'border-radius-base': '2px',
         },
         javascriptEnabled: true,
       },
     },
    }],
  }],
}