首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在vue.js中寻址到css时无法编译

在vue.js中寻址到css时无法编译
EN

Stack Overflow用户
提问于 2018-08-03 20:54:32
回答 1查看 475关注 0票数 0

我想设置我的图像为css文件,但它给出的错误,编译失败,我是新手在vue。

我尝试@从src进行相对寻址

代码语言:javascript
复制
body{
  background: url("@/image/background.png");
}

但是它使我出错,无法编译,不管怎样,我尝试了另一种方法,它再次显示错误,无法编译。

代码语言:javascript
复制
body{
  background: url("../image/background.jpg");
}

整个错误是:

代码语言:javascript
复制
Failed to compile.

./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"indentedSyntax":true,"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
Module not found: Error: Can't resolve '../image/background.jpg' in '/home/sina/WebstormProjects/landing-vue/src'
 @ ./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"indentedSyntax":true,"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 7:65-99
 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"indentedSyntax":true,"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js

我的css文件地址:

代码语言:javascript
复制
src/assets/stylesheet/style.scss

我的镜像文件地址:

代码语言:javascript
复制
src/assets/image/background.jpg
EN

回答 1

Stack Overflow用户

发布于 2018-08-03 23:54:09

你的镜像路径不是应该是:

代码语言:javascript
复制
body{
  background: url("@/assets/image/background.jpg");
}

您声明您的镜像路径是src/assets/image/background.jpg

@src/的别名,但您仍然需要进入assets文件夹。

我还将.png更改为.jpg。也检查一下你的文件扩展名。

如果在.scss文件中@别名不起作用,只需尝试相对链接:

代码语言:javascript
复制
body{
  background: url("../image/background.jpg");
}

显然,您需要根据放置样式表的位置来调整路径。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51673140

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档