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