按需加载
// 1.下载依赖模块
npm install react-app-rewired customize-cra babel-plugin-import
// 2. 定义加载配置的 js 模块: 在package.json 同级目录创建 config-overrides.js 文件
const {override, fixBabelImports} = require('customize-cra');
module.exports = override( fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css', }), );
// 第三步修改配置 package.json
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject" }
自定义主题
//自定义 antd 主题
//需求:使 antd 的默认基本颜色从 Blue 变为 Green
下载工具包: npm install less less-loader
修改 config-overrides.js 文件
const {override, fixBabelImports, addLessLoader} = require('customize-cra');
module.exports = override( fixBabelImports('import', { libraryName: 'antd',
// 针对antd实现按需打包: 根据import来打包(使用babel-plugin-import)
libraryDirectory: 'es', style: true, }),
// 使用less-loader对源码中的less的变量进行重新指定
addLessLoader({ javascriptEnabled: true,
// 修改全局变量
modifyVars: {'@primary-color': '#1DA57A'}, }), );
网友评论