vue scss @font-face 路徑問題


在弄項目中遇到的一些問題,做一下記錄,如有什么不妥之處,請多多指教。

在vue-cli3.0 構建的項目中使用 style-resources-loader自動化導入scss文件時,字體文件無法顯示。

vue.config.js中style-resources-loader的一些配制

 

文件的目錄

 

index.scss文件

 

iconfont.scss文件中使用相對路徑引入了字體文件

 

npm run serve時出錯

 

百度了很多資料,在https://www.jb51.net/article/147558.htm中找到了解決方法,這里對vue-cli項目的路徑有詳細的說明

原因是sass-loader的不提供url重寫,官方也提供了兩種解決方法,大概是下面圖片的這一塊

官方鏈接:https://github.com/webpack-contrib/sass-loader


最后解決方案:
iconfont.scss文件引入字體文件的url直接從根目錄往下找

 

使用~@可以的原因,可查看vue官網的資料  鏈接




 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM