vue?scss后綴文件background-image路徑錯誤的解決
更新時間：2022年12月07日 14:25:42 作者：門前大橋下www
這篇文章主要介紹了vue?scss后綴文件background-image路徑錯誤的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
scss后綴文件background-image路徑錯誤
問題
scss文件下，圖片路徑報錯
解決辦法
路徑前添加 ~
.empty {
? background-image: url("~@imgs/empty.png");
}@import "../style/lines.scss" 導(dǎo)致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;
}
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了在Vue項目中使用Typescript的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
在本篇文章中小編給大家分享了vue如何實現(xiàn)點擊隱藏與顯示的相關(guān)內(nèi)容，有需要的朋友們跟著學(xué)習(xí)下。2019-02-02
element-ui中this.$confirm提示文字中部分有顏色自定義方法
this.$confirm是一個Vue.js中的彈窗組件,其樣式可以通過CSS進(jìn)行自定義,下面這篇文章主要給大家介紹了關(guān)于element-ui中this.$confirm提示文字中部分有顏色的自定義方法,需要的朋友可以參考下2024-02-02
vue3中g(shù)etCurrentInstance不推薦使用及在＜script?setup＞中獲取全局內(nèi)容的三種方式
這篇文章主要給大家介紹了關(guān)于vue3中g(shù)etCurrentInstance不推薦使用及在＜script?setup＞中獲取全局內(nèi)容的三種方式,文中通過介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-02-02
Swiper是一個很常用的用于實現(xiàn)各種滑動效果的插件，PC端和移動端都能很好的適配。本文將利用Swiper實現(xiàn)封裝輪播圖組件，感興趣的可以了解一下2022-09-09
本文主要介紹了Vue3中key的作用和工作原理，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了vue+element遇到的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
本文探討了Vue項目中缺少明顯入口文件的原因,并提供了解決方案,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)登錄時圖形驗證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
關(guān)于iview和elementUI組件樣式覆蓋無效問題及解決
這篇文章主要介紹了關(guān)于iview和elementUI組件樣式覆蓋無效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09