vue scss后缀文件background-image路径错误的解决
作者：门前大桥下www
这篇文章主要介绍了vue scss后缀文件background-image路径错误的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
scss后缀文件background-image路径错误
问题
scss文件下，图片路径报错
解决办法
路径前添加 ~
.empty {
background-image: url("~@imgs/empty.png");
}@import "../style/lines.scss" 导致background: url()路径无效
解决方案是在webpack 中的vue.config.js中配置
configureWebpack: config => {
let obj = {};
obj.resolve = {
alias: {
'img': '@/assets/img',
}
};
return obj
}然后在lines.scss中如下使用
.L-arrows{
width: 10px;
height: 19px;
background: url("~img/arrows.png") no-repeat center;
background-size: cover;
overflow: hidden;
margin: 0px 10px 0px 20px;
}方法二：
<div class="test_img"></div> <style scoped lang="scss"> $img:"../assets/img"; @import "./style/test.scss"; </style>
在 test.scss中 代码如下
.test_img{
width: 100%;
height: 200px;
background: url('#{$img}/alipay.png') no-repeat center;
background-size: cover;
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。