React中antd按需加载样式不生效解决办法

最新推荐文章于 2024-06-07 14:03:04 发布
最新推荐文章于 2024-06-07 14:03:04 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： React学习中遇到的问题以及解决办法 文章标签： ant js react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZeXinWang/article/details/109712470
版权
按照antd官网文档，执行按需加载操作后，样式不生效，很可能是因为在webpack.config.js文件中设置了css模块化；解决办法：在终端中执行npm run eject弹出config文件夹后，找到webpack.config.js文件{ test: cssRegex, exclude: cssModuleRegex, use: getStyleLoaders({ impo
摘要由CSDN通过智能技术生成

按照antd官网文档，执行按需加载操作后，样式不生效，很可能是因为在webpack.config.js文件中设置了css模块化；
解决办法：
在终端中执行

npm run eject

弹出config文件夹后，找到webpack.config.js文件

{
   
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
   
                importLoaders: 1,
最低0.47元/天 解锁文章
ZeXinWang
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Antd create-react-app 按需加载无效解决方案（亲测可行）
bai_L的博客
06-03 512
Antd 版本为V3 首先按antd 官方网址提供的方法，安装插件 官方地址：https://3x.ant.design/docs/react/use-with-create-react-app-cn npm i react-app-rewired customize-cra --save 修改package.json /* package.json */ "scripts": { - "start": "react-scripts start", + "start": "react-app-
react使用antd框架实现按需引入样式不生效问题
weixin_49662044的博客
10-12 752
react使用antd框架实现按需引入样式不生效问题
Ant Design 组件默认值修改不生效问题
最新发布
qq_38074398的博客
06-07 313
方式一：将 key 设置为 default 值，当 key 的值改变后，触发重新渲染。因为 React 遍历 dom 时，会根据检测 key 是否改变，若改变则会重新渲染组件，进而使得组件的 default 值生效。antd 中的多个组件的 default 值只接受一次赋值，后续对 default 值进行了修改也不会生效。方式二：不使用组件的 default 值属性，将一个受控变量作为组件的值。
关于引入antd样式不生效的问题
Jet_Lover的博客
12-18 5242
有时候我们在引入antd，依赖包什么的都下好了的，可是样式就是不生效，比如这样 import { Row, Col,Button } from 'antd'; <Row justify="space-between"> <Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
create-react-app使用antd按需加载的样式无效问题的解决
01-19
官网给出的按需加载解决方案，先安装 babel-plugin-import 因为antd默认引入样式是less，所以需要手动配置为CSS，配置方法如下： 第一种方法：在package.json中配置，这种方法成功的前提是webpack里query下配置babelrc：true， 这样就会使用babelrc文件中的配置 babel: { presets: [ react-app ], plugins: [ [ import, { libraryName: antd, style: css
React antd 样式不加载不展示
u013282737的博客
10-27 1353
使用antDesign写页面，会发现，有时候样式不展示，因为有样式没有加载进去 发现前端import的是如下方式： import { Modal, Button, Row, Col, Input } from "antd/lib/index"; 改成下面的就好了。 import { Modal, Button, Row, Col, Input } from "antd"; ...
react配置antd按需加载的使用
10-17
主要介绍了react配置antd按需加载的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-admin：React + AntD后台管理系统解决方案
02-05
欢迎使用后台管理系统解决方案本项目是针对（后台人员）或（扩展人员）或快速构建后台管理系统而创建项目过老。 最近更新 升级所有模块到最新,近期会陆续更新 依赖模块 项目是用create-react-app创建的，主要还是列...
React 项目结合 Antd 的按需加载不起作用
TheHtmler的博客
05-29 1696
背景： 项目由 create-react-app 创建的，按照官网的要求，如果按需加载组件，需要加一些配置。我没有通过 .babelrc 或者 babel-loader，而是根据官网的 react-app-rewired 问题： 根据官网的步骤进行配置，当 npm start 的时候就会报错，如图： The "injectBabelPlugin" helper has been depr...
react+antd解决样式不生效问题
Sunny_lxm的博客
03-18 8879
react创建项目时暴露webpack文件，添加antd时样式不生效，报错。更改webpack配置
react引入antd样式失效
XinYe666666的博客
09-06 3746
官网给出的按需加载解决方案，先必须安装 antd和babel-plugin-import npm install antd --save npm install babel-plugin-import --save-dev 因为antd默认引入样式是less，所以需要手动配置为CSS，配置方法如下： 运行 npm run eject暴露webpack.config.dev和webpac...
create-react-app项目所遇问题总结之antd引入和样式不生效问题解决
阑珊伊人
06-10 1025
苦苦思索了许久，本想想像一些技术博主一样写一下写在前面的话，可惜半天也憋不出一个字来。 算了直接写吧。 1. 引入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后面添加 ...
antd按需引入样式无效
Bosshooo的博客
09-17 8263
##最近在项目中上antd时，发现了一个如果同时引入css modules和按需引入antd，antd样式无效的问题。 如果你的项目中只是引入antd，那么根据官网步骤配置webpack应该是不会有问题的。 ###1. 首先在引入antd之前，我在webpack中已经配置了css modules(css modules怎么使用这里我就不多说了)，现在我的webpack是这样的：   ``` m...
关于React + Antd 按需引入样式未生效问题
a1025600611的博客
12-17 1712
按需引入不需要引入antd.css 只引入用到的部分 减少代码体积。
React之解决使用antd后样式没有显示
Welkin_qing的博客
11-19 5598
文章目录一、问题详情二、解决办法 一、问题详情 今天重构一个项目时，发现，下载了antd的包但是antd的样式没有用上 在render函数中输出一个样式 const Login: FC<Props> = (): JSX.Element => { const handleOnFinish = useCallback((value: any) => { console.log(value) }, []) return ( <div className={
Antd样式加载不出来
weixin_40866459的博客
11-03 1656
解决方案： https://ant.design/docs/react/use-with-create-react-app-cn#使用-babel-plugin-import 修改 src/App.css，在文件顶部引入 antd/dist/antd.css。 @import '~antd/dist/antd.css';
React教程（三）——样式和图片加载问题
mapbar_front的博客
03-13 9183
1、样式 样式是一个界面的展示问题的核心，在样式方面，react和一般的web网页的区别还是挺大的。 第一、在react中，不使用class属性来添加样式，而是使用className属性。 第二、在react中，它的内联对象是使用对象的方式来表达的，而一般的web网页的内联样式，是一个字符串。 示例如下： //css .colorRed{ color: red; } //re...
create-react-app之antd按需加载样式配置不生效
u013790941的博客
11-28 1595
用create-react-app 创建一个项目后，由于要用到 Antd 想要按需加载，安装官网文档介绍，下载 babel-plugin-import 插件后 然后在项目根目录 添加 .babelrc 文件 // .babelrc { "plugins": [ ["import", { "libraryName": "antd", "libraryDi...
react antd按需加载
09-22
React 和 Ant Design 是目前非常流行的前端框架和UI组件库。而按需加载（按需引入）是一个比较重要的概念，它可以提高应用的性能和用户体验。 在使用普通方式引入整个 Ant Design 库时，会导致打包后的文件体积变大，加载时间变长，尤其是应用复杂时。而按需加载可以使得只引入实际使用到的组件，以达到减小文件体积和缩短加载时间的目的。 React Antd 按需加载的实现可以通过使用 babel 插件，例如 babel-plugin-import 来完成。首先需要安装该插件，并且在项目的 .babelrc 文件中配置插件，指定需要按需加载的组件。 安装插件的命令：npm install babel-plugin-import --save-dev 配置 .babelrc： ``` { "plugins": [ ["import", { "libraryName": "antd", "style": true }] ] } ``` 这样配置后，当我们在代码中引入 Ant Design 的组件时，例如 Button、DatePicker 等，babel-plugin-import 会根据我们配置的规则，只引入相关的代码和样式。 例如： ``` import { Button, DatePicker } from 'antd'; ``` 通过以上配置，Button 和 DatePicker 组件会被独立打包，并且只引入这两个组件所需的代码和样式，提高了应用的性能和加载速度。 总结来说，React Antd 按需加载是通过配置 babel 插件，实现只引入实际使用到的组件，避免了整个库的全部加载，提升了应用的性能和用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值