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;
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
