TL; 博士
字体被移动到正确的文件夹,但引用错误
我已经使用 Bower 在我的项目中实现了 VideoJs,但是在 Gulp 编译静态文件后的前端,我收到关于 VideoJs 使用的图标字体的错误。
浏览器指向/dist/styles/font/vjs.woff
而文件在 /dist/fonts/vjs.woff
我正在使用 Wordpress 主题 Sage ( https://roots.io/sage/ ) 和 gulpfile.js
运行 Wordpress 站点内置,否则我对 Gulp 没有很多经验。
它设置这些错误的 URL 可能会遗漏什么?
这是在编译的 CSS 中的样子:
src: url('font/vjs.eot');
src: url('font/vjs.eot?#iefix') format('embedded-opentype'), url('font/vjs.woff') format('woff'), url('font/vjs.ttf') format('truetype'), url('font/vjs.svg#icomoon') format('svg');
要点
https://gist.github.com/rkorebrits/18932bb6439b386fb4fc
附言
我注意到引用
fonts
的字体(复数)文件夹被正确处理
最佳答案
我认为这些项目对生成的 css 文件的位置有不同的假设。 wordpress 主题假定它在 styles
中目录旁边的目录 fonts
,意味着所有对字体的引用都将以 ../fonts
开头(如 _variables.scss 中所定义),现在 videojs 假定 css 文件本身位于 font
旁边。 (或字体)目录,所以路径以 font/
开头(如 video-js.scss 中所定义)。我会说你必须改变一个以匹配另一个。
关于Gulp 依赖项在错误的文件夹中查找,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32253344/