目录sCSS后缀文件background-image路径错误问题解决办法@import "../style/lines.scss" 导致background: u
scss文件下,图片路径报错
路径前添加 ~
.empty {
background-image: url("~@imgs/empty.png");
}
解决方案是在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;
}
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vuescss后缀文件background-image路径错误的解决
本文链接: https://lsjlt.com/news/174484.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0