0
点赞
收藏
分享

微信扫一扫

vue项目sass中图片路径引用方式说明


​vue template​​ 中可以使用根路径加载图片

<img :src="require('@/assets/img/logo.svg')" />

​scss​​中是不能这样写的

vue项目sass中图片路径引用方式说明_sass


​css loader​​ 会把非根路径的​​url​​解析为相对路径……但是又不能写成根路径​​/​​(不转译),因为没有



scss中的图片能不能从根路径加载呢?

也就是说,背景图片的样式可以这么写(​​template​​中同样适用)


background: url("~@/assets/img/footer.jpg") no-repeat;


​webpack​​​ 将以 ​​~​​​ 符号作为前缀的路径视作依赖模块去解析,按照​​node modules​​​路径进行加载。因为 CSS 和 Sass 文件没有用于导入相关文件的特殊语法。​​@import "file"​​​ 与 ​​@import "./file"​​;这两种写法是相同的。



为啥是以​​~​​​符号作为前缀呢?​​vue-cli​​​默认配置的​​publicPath​​​为​​/src​​​,别名为​​@​​​,而在scss中@是变量定义的前缀,所以需要加上​​~​​以示区分


​scss​​ 中引入图片可以有2种方式

  • 相对路径
background: url("../../assets/img/footer.jpg") no-repeat;
  • 绝对路径
background: url("~@/assets/img/footer.jpg") no-repeat;

ps:还可以在​​html​​​中通过​​require​​的方式引入

:style="{
background: 'url(' + require('@/assets/img/footer.jpg') + ') no-repeat',
}"



举报

相关推荐

0 条评论