美文网首页
react 用最简单的方法实现按需加载 以及自定义主题

react 用最简单的方法实现按需加载 以及自定义主题

作者: lessonSam | 来源:发表于2020-03-28 23:11 被阅读0次

按需加载

// 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'}, }), );

相关文章

网友评论

      本文标题:react 用最简单的方法实现按需加载 以及自定义主题

      本文链接:https://www.haomeiwen.com/subject/cgosuhtx.html