vue在css中使用@路径报错问题

最新推荐文章于 2024-04-06 22:56:42 发布

ONEO阿喔哟

最新推荐文章于 2024-04-06 22:56:42 发布

阅读量2.3k

点赞数 3

文章标签： vue.js css javascript

本文链接：https://blog.csdn.net/zhufan2333/article/details/127276994

版权

vue.config.js配置@不对style部分的css生效

css loader 会把把非根路径的url解释为相对路径，加~前缀才会解释成模块路径（~@代表根路径）。

//改之前
background: url(@/assets/images/background.jpg) no-repeat center;


//改之后
background: url(~@/assets/images/background.jpg) no-repeat center;

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ONEO阿喔哟

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue在css中使用@路径报错问题

vue.config.js配置@不对style部分的css生效。css loader 会把把非根路径的url解释为。，加~前缀才会解释成模块路径（~@代表根路径）。
复制链接

扫一扫

解决vite+vue3+typescript中使用@路径映射src引入vue router和vuex报错问题

yunmengying的博客

07-01

4927

报错为找不到模块@/store（@/router）这个报错不影响使用，查明原因不是ts.config.json的路径映射配置问题，而是router和vuex的index文件是js文件，而main.ts是typescript文件，引入的router和store没有类型声明，统一修改为typescript文件后解决。文件修改如下： main.ts //vue router import router from '@/router/index' //vuex import store from '@/s

Vue3加载本地assets图片路径错误

kingroc的博客

10-29

4727

错误的使用方式： const state = reactive({ sliders: [{ img: '@/assets/1.png' }, { img: '@/assets/1.png' }, { img: '@/assets/

参与评论您还未登录，请先登录后发表或查看评论

vue中@import css的时候无法识别～

YanGo的博客

01-08

3212

当我们用vue-cli创建项目的时候，发现在style中@import '~styles/common.scss'的时候发现会报错找不到路径我们可以在/build/webpack.base.con.js中的resolve配置别名再在styles中去引入 @import 'styles/common.scss'; /*或者*/ @import '～styles/common.sc...

css_background在vue中使用@写法引入图片

qq_57226103的博客

02-03

1181

css_background在vue中使用@写法引入图片

解决Vue项目中的路径解析错误（Cannot resolve directory ‘@’）

最新发布

weixin_53955862的博客

04-06

1742

在Vue项目中，您可能会遇到路径解析错误，例如“Cannot resolve directory ‘@’”。这个错误通常发生在尝试解析一个依赖或模块时，但由于路径配置不正确，导致无法找到对应的文件。这是解决js路径解析的方法，我们导入的是css。

vue+typescript @引用路径报错

janyxh的博客

07-27

1033

最近使用vite + vue 3.0 + typescript搭了一个项目，发现引入组件时，使用@引入绝对路径报错。想了下，可能是因为从vue cli换成了vite，也可能是javascript换成了typescript。那在目前的架构下，怎么使用@作为路径的开头呢？经查询vite文档，发现可以使用resolve.alias设置别称。 vite.config.ts import path from "path"; export default defineConfig({ resolve:

解决vue2中使用elementUi打包报错的问题

10-14

在Vue2项目中，ElementUI是一个非常流行的UI组件库，但在使用过程中，有时会出现打包报错的情况。本文将深入探讨两种常见的打包错误及其解决方案。 **错误1：找不到`element-ui/lib/theme-default/index.css`** 这...

用Vue-cli搭建的项目中引入css报错的原因分析

08-29

在使用Vue-cli搭建项目时，遇到引入css文件报错的问题是非常常见的。本文将详细介绍这种问题的原因分析和解决方法。问题描述在使用Vue-cli搭建的项目中，我们经常需要引入css文件，例如引入ElementUI库中的css...

关于Vue背景图打包之后访问路径错误问题的解决

08-28

当图片小于 10KB 时，url-loader 会将其转换为 base64 格式，但是在 CSS 中访问图片路径时，会出现路径错误的问题。解决这个问题有四种方法： 1. 使用小图片作为背景图片（建议）：将小于 10KB 的图片作为背景...

解决vue单页面应用打包后相对路径、绝对路径相关问题

11-20

在项目开发过程中，在部署过程中，用到了反向代理，这就要求前端代码中不能使用绝对路径。但是我们知道，一般情况下，通过webpack+vuecli默认打包后的HTML、css、js等文件，使用的都是绝对路径。下面可以举几个例子...

vite vue3+ts @引入无提示/解决提示报错

^_^

10-19

7067

配首先置setting.json好后重新引入没有红色波浪线但是 vite不认识 @符号运行项目还是会报错。这时候就需要在vite.config.ts中添加配置。如果path会报错需要下载一下@types/node。这时候已经有提示了但是ts会报错。

Vue style里面使用scoped属性并@import引入外部css, 作用域是全局的解决方案

渣渣兔子的博客

05-11

3万+

。。。

vue中css样式管理

qq_40674204的博客

02-21

1万+

1. Vue中scoped属性的渲染规则：给DOM节点添加一个不重复的data属性（比如data-v-7ba5bd90）来表示他的唯一性在每个CSS选择器末尾（编译后生成的CSS）加一个当前组件的data属性选择器（如[data-v-7ba5bd90]）来私有化样式。选择器末尾的data属性和其对应的DOM中的data属性相匹配子组件的元素上有一个类已经在这个父组件中定义过了，那么这个父组...

vue中使用@import ‘~@...’失效解决方案小记

热门推荐

zhufeng19900713的博客

05-08

3万+

最近使用webpack-cli官方模板构建vue项目的时候，发现在vue文件中直接使用@import + alias的方案不可行了，之前的解决方案都是使用~@的方式，但是最近发现这种方法不可行了，后来发现是因为使用了postcss-import导致的，postcss-import并不会直接去识别~@，然后就去查阅了相关的文档，最终废了老半天的功夫找到了一种解决方案：这里直接在.postcssrc.j

html中url路径怎么写,css中URL路径相关介绍

weixin_39833290的博客

05-31

2430

如果你在引用文件时(如加入超链接，或者插入图片等)，使用了错误的文件路径，就会导致引用失效(无法浏览链接文件，或无法显示插入的图片等)。本文就来为大家介绍一些css url相关知识。项目中，为a标签添加背景，老是没效果 (VS2013中相关文件的位置：CSS文件位于/Content中，图片位于/images中)为a标签添加背景的CSS代码为：background:url(images/sort....

vue获取当前页面的url路径

qq_43405603的博客

11-22

7820

完整url可以用 window.location.href 路由路径可以用 this.$route.path 路由路径参数 this.$route.params 例如：/user/:id → /user/2044011030 → this.$route.params.id 路由查询参数 this.$route.query 例如：/user/search?name=sf → this.$route.query.name 原文链接：https://blog.csdn.net/a350110085/articl.

vue之js、css等静态文件的引入(vue路径篇)

CruellyJohn的博客

02-13

2万+

1、如何引入如js，css等文件？比如我们想引入jQuery文件或者依赖若是已下载好的jQuery文件，则这样引入。打开webpack.base.conf.js，在relove加入这段代码 // 在开头引入webpack，后面的plugins那里需要 var webpack = require('webpack') // resolve module.export...

Vue项目中使用img图片和background背景图的使用方法

总结前端开发中遇到的问题，分享前端知识

09-11

1万+

Vue项目中使用img图片和background背景图的使用

vue-video-player引入css样式报错

08-16

您遇到的问题是在引入vue-video-player的CSS样式时报错。根据引用和引用的内容，您需要确保正确引入了vue-video-player的CSS样式文件。首先，在您的项目中，您需要在main.js文件中全局配置引入VueVideoPlayer，并安装vue-video-player依赖。确保您已经使用了正确的命令进行安装，如引用中所示，使用"npm install"或者"cnpm install"命令。接着，您需要在main.js中使用"import VueVideoPlayer from 'vue-video-player'"引入VueVideoPlayer，并使用"Vue.use(VueVideoPlayer)"进行全局配置。另外，根据引用中的内容，您还需要确保正确引入了video.js和自定义的CSS样式文件。请注意引入CSS样式文件的路径是否正确，并且确保这些文件已经正确安装和引入到您的项目中。如果您仍然遇到样式引入报错的问题，请检查您的依赖和文件路径等设置是否正确，并尝试重新安装依赖和引入样式文件。如果问题仍然存在，请提供更详细的错误信息，以便我能够为您提供更准确的解决方案。123 #### 引用[.reference_title] - *1* *3* [解决项目启动提示vue-video-player引入css样式报错](https://blog.csdn.net/qwyio/article/details/124265114)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* [Vue中如何引用视频（vue-video-player）](https://blog.csdn.net/Sakura1998gis/article/details/110188750)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交