react17.x通过config.override.js配置，实现antd及less的按需引入-我爱编程

当前位置：: 首页; 文章; 前端
详情

react17.x通过config.override.js配置，实现antd及less的按需引入

前端
三生万物
0

antd安装

> npm install antd -S

less安装

> npm install less less-loader -D

react-app-rewired 相关安装

> npm install react-app-rewired customize-cra babel-plugin-import -D

项目根目录新建 config.overrides.js 内容如下：

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

module.exports = override(
    // 针对antd 实现按需打包：根据import来打包 (使用babel-plugin-import)
    fixBabelImports('import',{
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true, // 自动打包相关的样式 默认为 style:'css'
    }),
    // 使用less-loader对源码重的less的变量进行重新制定，设置antd自定义主题
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: {'@primary-color':'#1DA57A'},
    })
);

修改 package.json 的 scripts 配置：

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react--app-rewired test",
    "eject": "react-scripts eject"
},

import React ,{Component} from 'react';
import { Button , message} from 'antd';

export default class App extends Component{
    handleClick = ()=>{
        message.success('success')
    }
    render(){
        return (
            <Button type="primary" onClick={this.handleClick}>点击我</Button>
        )
    }
}

免责申明：本站发布的内容（图片、视频和文字）以转载和分享为主，文章观点不代表本站立场，如涉及侵权请联系站长邮箱：xbc-online@qq.com进行反馈，一经查实，将立刻删除涉嫌侵权内容。