vue scss @font-face 路徑問題

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

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

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

css

 

文件的目錄
html

 

index.scss文件vue

 

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

 

npm run serve時出錯
git

 

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

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

官方連接:https://github.com/webpack-contrib/sass-loader
vue-cli


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

 

使用~@能夠的緣由,可查看vue官網的資料  連接sass




 

原文出處:https://www.cnblogs.com/yingyuan/p/10531340.html

相關文章
相關標籤/搜索