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

相关文章
相关标签/搜索