关于css中@路径报错问题

原创 已于 2022-06-01 10:51:07 修改 · 794 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#学习

于 2022-06-01 10:48:36 首次发布
在项目中遇到CSS的@路径引用问题，部分图片无法正常加载。问题出现在~前缀导致的识别异常，虽然在JS和HTML中能正确识别。这可能涉及到CSS预处理器如Less或Sass的语法，不同解析方式对路径处理的影响。解决此类问题需理解前端资源加载机制及预处理器的规则。

做项目的时候发现用@路径报错
请添加图片描述
而且图片在同一个文件夹里面 但是部分识别不出来
原因是css里面在@前面加~
个别可以识别的原因是在js里面可以识别
在这里插入图片描述
而且可以看到在html里也可以识别
在这里插入图片描述

Vue2.x中利用@font-size引入字体图标报错的解决方法
12-04
总的来说，处理Vue2.x中利用`@font-size`引入字体图标报错的关键在于正确配置文件路径、确保样式文件的引入和浏览器的兼容性。通过调整文件位置、转换文件类型以及优化`webpack`配置，可以有效避免这些问题，确保...
用Vue-cli搭建的项目中引入css报错的原因分析
08-29
5. 在开发Vue-cli项目时，需要注意css文件的路径问题，正确地配置css文件的路径可以避免许多报错的问题。 结语 本文详细介绍了Vue-cli项目中引入css报错的问题原因分析和解决方法。希望这个解决方法能够帮助大家在...
【css】引入背景图时候，路径写入@会报错
galaxyJING的博客
05-24 384
看报错信息我的写法解决办法在@前面加个~
ssm项目css文件没有效果
tear___的博客
02-16 566
css的路径都正确却无法显示效果可能是因为过滤器造成的原因在web.xml文件中配置以下内容可以解决
vue在css中使用@路径报错问题
zhufan2333的博客
10-12 2716
vue.config.js配置@不对style部分的css生效。css loader 会把把非根路径的url解释为。， 加~前缀才会解释成模块路径（~@代表根路径）。
css中使用@引用图片不能用
m0_56284685的博客
02-28 757
css中使用@引用图片不能用
vue3+vite+ts css使用@import 报错
01-04
在 Vue 3 使用 Vite 和 TypeScript 的项目中遇到 CSS `@import` 报错的情况通常是因为缺少必要的配置或插件支持。以下是详细的解决方案： #### 配置 Vite 支持 CSS Modules 或其他预处理器 为了使 `@import` 正常...
webstorm @import "~@"报错
最新发布
08-05
首先，用户的问题是关于WebStorm中@import "~@"路径报错的解决方法。用户提供了几个引用，我需要参考这些引用来给出解决方案。 关键引用： - 引用[1]：解决WebStorm不能识别@import "~@/assets/css/main"的问题，...
vue打包静态资源后显示空白及static文件路径报错的解决
10-14
关于Vue打包后路径中多了'/css/static'导致某些CSS属性不显示的问题，这通常是因为在构建过程中，Webpack对静态资源的路径处理出现了一些偏差。为了解决这个问题，需要在build/utils.js文件中调整publicPath的配置。...
Vue @import ‘~@/css/reset.css’；报错，解决方案
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
10-03 7945
这个问题简单，不做过多描述，如题所述，如果因为这个导致错误，请安装。
vue css中使用@别名加载图片失败问题
likuntao123的博客
12-31 1263
vue css中使用@别名加载图片失败问题 问题的由来：css-loader会把非根路径的url解析为相对路径（添加~前缀会被解析为根路径） build => webpack.base.conf.js（别名） style ...
vue css中使用@作为根路径报错问题
qq_39537116的博客
09-11 5950
配置vue.config.js不对style部分得css生效，CSS loader 会把把非根路径的url解释为相对路径， 加~前缀才会解释成模块路径（~@代表根路径）。
在VScode中配置@路径提示
yy_demo的博客
06-16 2676
可以在目录看一下是否有webpack.config.js文件或者是vue.config.js文件，需要先配置一下如下代码。默认情况下使用@选择路径是没有提示的，但是这在我们选择路径的时候非常不方便，我们可以配置一下，下面是具体的步骤。可以用快捷键Ctrl+shift+p快捷键搜索setting.js,去配置代码片段。完成以上三步，你就可以到自己的代码中测试一下效果了。
vue中@import css的时候无法识别～
YanGo的博客
01-08 3753
当我们用vue-cli创建项目的时候，发现在style中@import '~styles/common.scss'的时候发现会报错找不到路径 我们可以在/build/webpack.base.con.js中的resolve配置别名 再在styles中去引入 @import 'styles/common.scss'; /*或者*/ @import '～styles/common.sc...
VUE css中使用@引用图片
qq_39927006的博客
12-16 1248
1.问题起因： 在vue的css样式中使用@/对图片进行应用的时候报错了，使用…/…/的格式确可以 问题原因：因为css样式中不支持对@符号的解释需要加上符号 ~ 才能识别 .eui-timeline3 .time-info.current .time-img.hjxx { background: url("~@/views/business/baseinfo/realpop/images/time-hjxx-on.png") no-repeat center, linear-g
CSS中，SASS/SCSS语言的‘@/‘路径引入问题
xxx_datou的博客
04-15 1673
@/ 是webpack设置的路径别名，代表什么路径，要看webpack的build文件夹下webpack.base.conf.js里面对于@是如何配置，在scss中，如果我们想要使用@别名，需要在前面加上一个~才可以 例如: background: url('~@/assets/common/leftnavBg.png') no-repeat 0 100%; ...
angular--解决angular图片加载失败问题
xuehu837769474的博客
02-20 2045
基于angular7写的一个指令，在ionic3.x项目在用。因为加载图片超时等原因导致图片显示不出来，需要替换成默认或者指定图片 1.err-src.ts import{ Directive,Input } from'@angular/core'; @ Directive({ selector:'[err-src]',// Attribute s...
@和~@符号路径解决
qq_41180882的博客
07-02 2977
@代表项目的src路径，是vue-cli给我们提供的，解决路径比较长，找文件比较麻烦的问题 证明@是src并且是vue-cli通过webpack设置的,通过审查项目的 webpack 配置 通过命令vue inspect > output.js~@路径和js当中@类似,当时这里要依靠扩展来解决问题 (1)安装扩展Path Autocomplete (2)在vscode配置中添加下面设置...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值