create-react-app中antd按需加载配置+自定义主题
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了create-react-app中antd按需加载配置+自定义主题相关的知识,希望对你有一定的参考价值。
参考技术A 在 file-loader 上面引入规则 顺序不可变更. 当配置多个 loader 时, loader 的执行顺序是从右到左, 从下到上-参考: https://juejin.cn/post/6844904132696866830
create-react-app自定义配置
这里主要讲解添加less 和 实现Antd按需加载
首选需要执行npm run eject 暴露所有内建的配置 ,这是后面所有配置的基础,这个必须优先执行!
一、实现Antd按需加载
按需加载插件。只需要引入模块即可,无需单独引入样式。
import {Button} from ‘antd‘; ReactDom.render( <div> <Button> XXXX </Button> </div>);
1. 使用babel-plugin-import实现Antd按需加载,修改package.json,或者在项目根目录新建文件.babelrc写配置,注意是二选一。
首先执行以下命令安装 babel-plugin-import
npm install babel-plugin-import --save-dev
1)、修改package.json
"babel": { "presets": [ "react-app" ], "plugins": [ [ "import", { "libraryName": "antd", "style": true } ] ] }
2)、修改.babelrc
{ "presets": [ "react-app" ], "plugins": [ [ "import", { "libraryName": "antd", "style": true } ] ] }
注意: 不要认为package.json里已有presets配置这里就不用写,这里的.babelrc会覆盖package.json里带有的babel配置,如果删除presets配置,会报错。
二、引入Less
1)安装less-loader 和 less
npm install less-loader less --save-dev
2)修改config文件夹下的webpack.config.dev.js和webpack.config.prod.js文件(都需要修改)
查找 :exclude
原本的 exclude: [/.js$/, /.html$/, /.json$/],
修改为 exclude: [/.html$/, /.(js|jsx)$/, /.(css|less)$/, /.json$/, /.bmp$/, /.gif$/, /.jpe?g$/, /.png$/],
查找:test: /.css$/
原本的 test: /.css$/,
修改为 test: /.(css|less)$/,
在这个test的下面找到use,添加loader
use: [ {...}, {...}, { loader: require.resolve(‘less-loader‘) // compiles Less to CSS } ]
参考地址:
https://blog.csdn.net/zhaoyu_m69/article/details/78800887
https://segmentfault.com/a/1190000012881473
https://blog.csdn.net/qq_35809834/article/details/72670220
以上是关于create-react-app中antd按需加载配置+自定义主题的主要内容,如果未能解决你的问题,请参考以下文章
基于create-react-app脚手架,按需加载antd组件以及less样式
react 脚手架create-react-app快速配置开发中常见问题,配合antd按需加载