引入import ‘antd/dist/antd.css‘报错

最新推荐文章于 2023-08-31 16:20:41 发布
最新推荐文章于 2023-08-31 16:20:41 发布
阅读量2.7k 收藏
点赞数
分类专栏： React 前端 文章标签： 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LeonArdo_Netsr/article/details/127490579
版权

在这里插入图片描述

Failed to parse source map: 'webpack://antd/./components/time-picker/style/index.less' URL is not supported

原因分析：
出现这个问题是因为 react-script 升级到5.0.0.，通过npx create-react-app 创建的项目，引入antd.css 之后会看到这个警告。
在这里插入图片描述
傻瓜式解决方案：

import "antd/dist/antd.css"
替换为
import "antd/dist/antd.min.css"

在这里插入图片描述

SCENARIO24
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react 引入antd 样式_react项目中使用antd
weixin_40009026的博客
12-19 1223
1.antd官网：https://ant.design/docs/react/introduce-cn2、React中使用Antd1、安装antd npm install antd --save / yarn add antd / cnpm install antd --save2、在您的react项目的css文件中引入 Antd的css@import '~antd/dis...
使用antd引入antd.css报错
分享我所知道的,让你知道的更明白.
05-14 7484
WARNING in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modu
React练习项目在src中使用@import ‘~antd/dist/antd.css‘； 报错：Can‘t resolve ‘~antd/dist/antd.css‘
m0_62544477的博客
03-30 423
使用@import '~antd/dist/antd.css'; 报错：Can‘t resolve '~antd/dist/antd.css'
react安装依赖引入报错
执笔绘江山的博客
11-26 2860
在react脚手架中，使用npm add antd安装最新的依赖以后，再使用import 'antd/dist/antd.css'全局引入会报错，报错原因显示为： Module not found: Error: Can't resolve 'antd/dist/antd.css' in 'C:\Users\26396\Desktop\react-project\src' 这时进入下载的antd依赖文件中查看会发现找不到antd.css的文件，原因是使用默认add antd下载的是最新版本的依赖文件，如
react 使用ant-design（antd）安装引用（组件。样式）和 antd 自定义主题
艾米的猫儿的博客
04-26 1325
1.安装 yarn ass antd 或者 npm install antd 2.引用 import { Button } from 'antd'; // 引入组件 import 'antd/dist/antd.css'; // 引入样式
Antd按需加载使用配置
qq_60976312的博客
09-13 762
Antd按需加载使用配置
react引入antd报错找不到antd/dist/antd.css Module not found: Error: Can‘t resolve ‘antd/dist/antd.css‘ in
热门推荐
weixin_51867622的博客
11-19 1万+
Failed to compile. Module not found: Error: Can't resolve 'antd/dist/antd.css' in 'D:\develop\file\react-file\exercise\react-pc-142\src' ERROR in ./src/index.js 9:0-28 Module not found: Error: Can't resolve 'antd/dist/antd.css' in 'D:\develop\file\re
react之通俗易懂配置less
01-08
使用create-react-app构建react项目之后，配置less-loader，配置完了后，正常引入less没问题，但是@import “~antd/dist/antd.less”还是会报错： 问题： Failed to compile. ./node_modules/antd/lib/style/index....
详解使用create-react-app添加css modules、sasss和antd
10-18
最后，记得在项目中引入`antd`的样式文件，通常是在`index.js`或`App.js`中添加`import 'antd/dist/antd.css';`。这样，`antd`的所有样式都将被正确加载。 总结，本文详细讲解了如何在`create-react-app`项目中添加...
react-antd.zip
05-25
然后，在项目入口文件中引入样式文件，通常为`import 'antd/dist/antd.css'`，确保组件的样式正确显示。 接下来，我们将讨论如何在React项目中使用`antd`。使用`antd`的关键在于理解每个组件的属性和用法。例如，...
antd-button-color：适用于Ant Design的简单按钮可响应更多颜色，例如主色，成功，警告，信息，深色，浅色
02-28
蚂蚁按钮颜色 Ant Design的简单按钮可响应更多颜色，例如默认，主要，成功，...import 'antd/dist/antd.css' ; // or 'antd/dist/antd.less' import 'antd-button-color/dist/css/style.css' ; // or 'antd-button-c
Antd的一些用法操作
12-16
在项目中，不需要全局引入 `antd/dist/antd.css`，而是根据需要导入特定的组件。例如，如果只需使用 Button 组件，可以这样写： ```javascript import { Button } from 'antd'; ``` 然后，为了实现按需加载，需要...
2021-07-17AntDesign基本使用
weixin_53125679的博客
07-17 262
AntDesign 这是蚂蚁金服推出的设计语言，蚂蚁金服官方基于该设计语言实现了React组件库 安装 npm i --save antd # 或者 yarn add antd 引入css 我们在App.css通过css引入模式进行引入 App.css @import '~antd/dist/antd.css'; 或者我们可以在App.js中引入css App.js import "antd/dist/antd.css" 使用组件 React组件不支持全局注册，我们需要在我们对应的使用到antd组件的
在react项目中使用了sass后导入antd.css报错
qq_41187156的博客
04-13 551
在react项目导入antd.css报错 在项目导入了antd，在引用他样式的时候，项目报错，如果用import 导入antd.css，页面能正常出现，但终端这里一直报错，大概就是这个： Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map: ‘webpack://antd/./components/time-picker/style/index.less’ URL is
引入import ‘ant-design-vue/dist/antd.css‘时报错
最新发布
weixin_50636942的博客
08-31 7840
提示 Module not found: Error: Can't resolve 'ant-design-vue/dist/antd.css' in 'D:\yupi\antd-demo\src'初始化前端时候总拉不下来ant.css文件，这个路径ant-design-vue 不存在css文件。后来发现官方文档给的是错误的，css文件叫reset.css。在使用Ant Design Vue 时初始化项目报错。
React 中 引入 antd CSS 报警告 解决方法
埋葬冬天super
08-17 1211
React 中 引入 antd CSS 报警告 解决方法
Module not found: Error: Can‘t resolve ‘antd/dist/antd.css‘ in ‘E:\new\react\geek-pc\src‘
weixin_51583081的博客
01-03 8001
Hi,我是赵猛，今天是做react项目的第二天，记录一下学习过程中出现的一些问题。
Vue出现Expected Array, got String with value报错解决方法
AQUROEAN
08-26 8365
问题报错： 在传值的时候加上中括号就行，可将string直接转换成数组 <template> <view> <u-notice-bar type="none" mode="horizontal" :list="[list]"></u-notice-bar> </view> </template> <script> export default { data() { return { list:
ant design 报错Failed to resolve import "ant-design-vue/dist/antd.css" from "src\main.js". Does the file exist?
07-15
这个错误通常是由于未正确安装或配置Ant Design Vue导致的。请确保您已正确安装了Ant Design Vue，并且已经在您的项目中正确引入了CSS文件。 您可以按照以下步骤来解决这个问题： 1. 确保您已经通过npm或yarn安装了Ant Design Vue。您可以在项目根目录下运行以下命令来安装它： ``` npm install ant-design-vue --save ``` 或者 ``` yarn add ant-design-vue ``` 2. 在您的`src/main.js`文件中，确保正确引入了Ant Design Vue的CSS文件。您可以使用以下代码来引入： ```javascript import 'ant-design-vue/dist/antd.css'; ``` 3. 如果您是通过Vue CLI创建的项目，还需要在`vue.config.js`文件中进行配置。在该文件中添加以下内容： ```javascript module.exports = { css: { loaderOptions: { less: { lessOptions: { modifyVars: { // 这里可以根据需要进行主题定制 }, javascriptEnabled: true, }, }, }, }, }; ``` 4. 重新编译您的项目并运行，看看是否还有报错。 如果仍然遇到问题，请检查您的项目配置和文件路径是否正确，并确保按照Ant Design Vue的文档正确使用组件和样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值