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" 導致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;
}
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了vue使用swiper.js重疊輪播組建樣式，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要介紹了vue中render函數(shù)的使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
常見的文件上傳方式可能就是new一個FormData，把文件append進去以后post給后端就可以了。但如果采用這種方式來上傳大文件就很容易產(chǎn)生上傳超時的問題。所以本文將利用Vue+NodeJS實現(xiàn)大文件上傳，需要的可以參考一下2022-05-05
vue3配置代理實現(xiàn)axios請求本地接口返回PG庫數(shù)據(jù)
這篇文章主要為大家詳細介紹了vue3配置代理實現(xiàn)axios請求本地接口返回PG庫數(shù)據(jù)的相關知識,文中的示例代碼講解詳細,感興趣的小伙伴可以了解下2025-03-03
這篇文章主要為大家詳細介紹了如何通過使用 Vue 3 的 Composition API 創(chuàng)建一個強大而靈活的自定義 Hook,簡化了在 localStorage 或 sessionStorage 中管理數(shù)據(jù)的流程,需要的可以參考下2023-12-12
這篇文章主要介紹了Vue如何基于vue-i18n實現(xiàn)多國語言兼容,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了Vue項目中quill-editor帶樣式編輯器的使用方法，可以更改插入圖片和視頻，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
vue element-ui導航實現(xiàn)全屏/取消全屏功能
這篇文章主要介紹了vue element-ui導航實現(xiàn)全屏/取消全屏功能,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
簡易Vue評論框架的實現(xiàn)(父組件的實現(xiàn))
本篇文章主要介紹了簡易 Vue 評論框架的實現(xiàn)(父組件的實現(xiàn))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了基于iview的router常用控制方式,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05