在自己搭建脚手架的过程遇到一些坑,有坑才有进步~
写这个为了记录一下坑的同时,也可以作为一些经验分享给有需要的人。
报错截图:在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到我们所用到的组件中去。哈哈哈哈
如果有大神有更加优雅的方法,可以一起分享一下,感激~~