create-react-app项目所遇问题总结之antd引入和样式不生效问题解决
苦苦思索了许久,本想想像一些技术博主一样写一下写在前面的话,可惜半天也憋不出一个字来。算了直接写吧。1. 引入antd第一步:安装antdyarn add antd -S第二步:安装babel-plugin-import,让antd样式按需加载yarn add babel-plugin-import -S第三步:配置babel-plugin-import的方式方式一:配置package.json在
·
以下为学习react技术栈开发过程中,遇到的问题以及解决方法总结。各位看官请往下瞧!☆〜(ゝ。∂)
如何引入antd
第一步:安装antd
yarn add antd -S
第二步:安装babel-plugin-import,让antd样式按需加载
yarn add babel-plugin-import -S
第三步:配置babel-plugin-import的方式有两种
方式一:配置package.json
在根目录下的package.json的label下的presets后面添加
"plugins":[["import",{"libraryName": "antd", "style": "css"}]]
如下所示:
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
}
方式二:新建.babelrc文件配置
在根目录下新建文件.babelrc,再将package.json中的“babel”对象全部删除。在.babelrc中配置
{
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
}
再到命令行执行
yarn eject
将react-scripts的配置释放出来。
之后,
再到config/webpack.config.js文件中全局搜索找到babelrc配置项,将其设置为true(只有设置为true,才会从.babelrc中去读取配置),默认为false。
第四步:使用antd组件,重启项目即可生效
快去试试吧!
问题:
成功引入antd后,只用antd UI组件返现样式不生效?
解决:
- 按照上面步骤,从上往下检查一下,看是否babel-plugin-import配置正确?
- 若你babel-plugin-import是按照方式二配置的,且babel配置没有问题,那么请在config/webpack.config.js文件中找一下test: cssRegex,这个配置,是否有配置
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
若有请去掉这个配置,再重启,就ok了
原因:
getCSSModuleLocalIdent是让css模块化的配置,就是说配置上后,你要在页面中使用css,得这样用
使用"对象."的方式获取class。
因为加上了getCSSModuleLocalIdent,而antd组件中css并不是这样引入使用的,所以导致了class没生效。
更多推荐
已为社区贡献2条内容
所有评论(0)