在sass使用@font-face报错not found的解决办法分享

在自己搭建脚手架的过程遇到一些坑，有坑才有进步~

写这个为了记录一下坑的同时，也可以作为一些经验分享给有需要的人。

报错截图：在scss文件写@font-face的时候，编译就已经报错啦

至于原因呢，查了一下，官网是这样说的：

由于 Sass/libsass 并没有提供url rewriting 的功能，所以所有的链接资源都是相对输出文件(output)而言。

• 如果生成的 CSS 没有传递给 css-loader，它相对于网站的根目录。
• 如果生成的 CSS 传递给了 css-loader，则所有的 url 都相对于入口文件（例如：main.scss）。

第二种情况可能会带来一些问题。正常情况下我们期望相对路径的引用是相对于 .scss 去解析（如同在 .css文件一样）。幸运的是，有2个方法可以解决这个问题：

• 将 resolve-url-loader 设置于 loader 链中的 sass-loader 之后，就可以重写 url。
• Library 作者一般都会提供变量，用来设置资源路径，如 bootstrap-sass 可以通过 $icon-font-path 来设置。参见this working bootstrap example。

解决办法一：

在sass-loader之前，再加一个resolve-url-loader,安装就不用我讲了吧~

解决方法二：

src使用绝对路径，虽然有点不优雅，因为别人本地的项目路径不一定一样

还有一个很黑暗的方法就是。。使用vscode的easy-sass插件将我们的声明字体的scss文件编译成css，再将该css通过@import到我们所用到的组件中去。哈哈哈哈

如果有大神有更加优雅的方法，可以一起分享一下，感激~~

 

 

转载于:https://www.cnblogs.com/eruich/p/10167437.html