引入antd组件样式，按需引入的高级配置

引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系，你还需要安装 customize-cra。

npm i react-app-rewired customize-cra

修改scripts，eject不用改

/* package.json */
"scripts": {"start": "react-app-rewired start","build": "react-app-rewired build","test": "react-app-rewired test","eject": "react-scripts eject"
}

module.exports = function override(config, env) {// do stuff with the webpack config...return config;
};

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。

npm i babel-plugin-import

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

//配置具体的修改规则
const { override, fixBabelImports } = require('customize-cra');module.exports = override(fixBabelImports('import', {libraryName: 'antd',libraryDirectory: 'es',style: 'css',}),
);

App.jsx 当中就不再引入css文件

下面是引入的一些组件

//src/App.js
import React, { Component } from 'react'
import { Button,DatePicker } from 'antd';
import {WechatOutlined,SearchOutlined} from '@ant-design/icons';
const { RangePicker } = DatePicker;
function onChange(date, dateString) {console.log(date, dateString);
}
export default class App extends Component {render() {return (<div><Button type="primary">Primary Button</Button><WechatOutlined /><Button type="primary" icon={<SearchOutlined />}>Search</Button><DatePicker onChange={onChange}/><RangePicker /></div>)}
}

可查看链接: https://3x.ant.design/docs/react/use-with-create-react-app-cn/.

引入antd组件样式，按需引入的高级配置相关推荐

引入antd组件样式_create-react-app 实现 antd 的按需加载
按需加载 antd 的实现方式: 用 create-react-app 创建项目后,如果需要第三方的插件库,需要配置 webpack 配置文件,步骤如下: 首先运行 npm run eject 暴露出 ...
引入antd组件样式_扩大团队技术影响力，搭建团队自己的 UI 组件库
一.技术栈我们先简单了解一下要搭建一个团队的 UI 组件库,会涉及到哪些技术栈: Create React App:官方支持的 CLI 脚手架,提供一个零配置的现代构建设置: React: 用于构建 ...
引入antd组件样式_个人作品：一个技术栈koa2+ mysql+react + antd的个人博客
前言此项目是个人博客,有前端界面+后台管理系统:目的是当做react和node的练手项目,同时还可以了解到服务器nginx部署web站点以及备案和域名的基本操作流程. 项目预览地址 https:// ...
引入antd组件样式_antd组件样式局部加载，用react-app-rewired插件应该怎么配置？...
package.json配置: { "name": "hawerblog", "version": "0.1.0", & ...
引入antd组件样式_如何使用 dumi 和 fatherbuild 创建组件库
在这个文章中,将会简单的介绍如何使用 dumi 和 father-build 来创建组件库和维护组件库.最终我们会演示如何组织组件库的代码.还会输出一个简单的组件库. 脚手架初始化新建一个空文件夹, ...
react 引入antd 样式_react引入antd组件
1.antd官网: https://ant.design/docs/react/introduce-cn 2.React中使用Antd 1.安装antd npm install antd --save ...
2022-04-05 学习记录--React-React UI组件库-ant-design（蚂蚁金服）—— 按需引入样式 + 自定义主题
一.流行的开源React UI组件库流行的开源React UI组件库 material-ui(国外) 1.官网:http://www.material-ui.com/#/ 2.github:http ...
element ui需要引入样式吗_彻底学会element-ui按需引入和纯净主题定制
原标题:彻底学会element-ui按需引入和纯净主题定制作者:wuwhs 来源:SegmentFault 思否社区前言手上有些项目用的element-ui,刚好有空琢磨一下怎么减小打包文件大小 ...
（vant新手坑）引入Vant组件并改变其样式
遇到的问题在使用tab组件的时候,要改变tab组件上的文字颜色和滚动条的颜色.这个官网是有接口的,就是这个color. Tabs API 参数说明类型默认值color 标签颜色 String ...

引入antd组件样式，按需引入的高级配置

引入antd组件样式，按需引入的高级配置相关推荐

最新文章

热门文章