react脚手架(create-react-app)配置antd中css按需加载的坑

2019-07-19 15:45:19 浏览数 (1)

前不久写了一篇关于react脚手架(create-react-app)配置antd中css按需加载的踩坑记录,文章内容有误,原文如下react脚手架(create-react-app)配置antd中css按需加载的坑。

这篇文章直接修改了node_modules里面的内容,一般开发中是绝对不能这样做的,小编在整理的时候没有及时发现,真是抱歉。

俗话说的好,有错就要认,挨打要立正,关于后台留言的所有评论我都接受,实在抱歉。

下面是勘误修正后的文章:

想利用create-react-app搭建基本项目,首先全局应该有这个工具:

代码语言:javascript复制
cnpm i create-react-app -g

在全局安装完之后,就可以利用create-react-app初始化项目了

代码语言:javascript复制
create-react-app admin('项目名')
// 下完包后 进入admin目录
cd admin
// 然后就可以将项目跑起来
yarn start

这样我们就很顺利的完成了react的基本结构搭建

接下来我们就可以在项目中配置antd

1、下载antd

代码语言:javascript复制
cnpm i antd -S

2、配置antd按需加载css 首先下载babel-plugin-import

代码语言:javascript复制
cnpm i babel-plugin-import -S

3、再创建.babelrc文件

代码语言:javascript复制
{
  "plugins": [
    ["import", { "libraryName": "antd", "style": "css" }] 
  ]
}

4、最后在项目中引入antd组件

代码语言:javascript复制
import { Button } from 'antd';
<Button type="primary">Primary</Button>
<Button>Default</Button>

5、当你们看到这的时候,你们会发现,这不正常操作么,没有什么坑啊,但是你会发现antd的样式没有起作用,????满脑子疑问,这里其实错的不是我们,也不是antd,而是这个脚手架,它默认是不使用.babelrc的,它使用的是package.json中的babel配置和内部配置

上一篇错误文章我们在这里出错后就去修改node_modules了,这是绝对不能做的。

6、所以我们要将脚手架的内部配置项暴露出来进行修改,使用 npm run eject这个命令来暴露配置。但是运行 npm run eject会报出下面的错误:

7、此时这个报错,需要将代码利用git提交

代码语言:javascript复制
git add .
git commit -m "init"

8、然后再重新npm run eject 此时就就不会报上面的错误了,运行npm run eject之后,项目根目录会生成config文件夹

9、找到config/webpack.config.js文件,将babelrc:false改为true,意思是启用.babelrc的配置,如图:

10、还没有完,此时如果运行项目,浏览器还会报错(天了噜,真tm想弃用....)为什么会报错呢?因为上面一步开启了使用.babelrc文件,但是.babelrc的配置不正确,我们需要修改(为什么不正确呢?因为creat-react-app有一些默认的babel配置放到了package.json中)

11、此时将package.json中的babel下面的 "presets": [ "react-app" ] 配置到 .babelrc中,并将package.json中的babel删除掉,如图:

总结一下,create-react-app的脚手架使用anted的css按需加载,由于此脚手架默认不支持使用.babelrc文件,所以需要将其配置暴露出来,需要用到npm run eject 命令,暴露配置文件后需要在config/webpack.config.js中开启使用.babelrc文件的功能,开启后配置.babelrc。配置的时候需要注意一点,将package.json中的babel配置剪贴到.babelrc中。

0 人点赞