可能的解决方案：

Question

TL; DR 字体被移动到正确的文件夹，但引用错误

我在使用Bower的项目中实现了VideoJs，但是在Gulp编译静态文件后的前端，我收到有关VideoJs使用的Icon字体的错误。

当文件位于/dist/styles/font/vjs.woff

时，浏览器会指向/dist/fonts/vjs.woff

我正在使用内置gulpfile.js的Wordpress主题Sage（https://roots.io/sage/）运行Wordpress网站，否则我对Gulp没有太多经验。

可能会错过它设置这些错误的网址？

这就是编译后的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

P.S。我注意到，fonts（复数）文件夹引用的字体处理正确

Answer 1

我认为项目对生成的css文件的位置有不同的假设。 wordpress主题假定它位于目录styles旁边的fonts目录中，这意味着对字体的所有引用都将以../fonts开头（如_variables.scss中所定义），现在videojs假设css文件本身位于font（或字体）目录旁边，因此路径仅以font/开头（如video-js.scss中所定义）。我要说你必须改变一个以匹配另一个。

Answer 2

更新！

此语法（!default）已在my PL之后合并到主分支。如果您将video.js版本更改为master并重新安装，那么它应该正常工作。

bower.json：

{
  //... 
  "dependencies": {
    //... 
    "video.js": "master"
  }
}

注意：我建议您在新版本发布后将其更改为固定版本。

在Sage项目中，main.scss通过_variables.scss导入自定义变量和字体路径。

// Glyphicons font path
$icon-font-path: '../fonts';

然后导入所有的凉亭风格组件。但是在VideoJs项目中，变量没有使用!default语法定义，如bootstrap项目。这会导致在video-js.scss文件中覆盖字体路径变量。此项目中的所有变量都应使用!default语法定义，如：

$icon-font-path: '../fonts'  !default;

可能的解决方案：

在本地更改video-js.scss文件并向项目发送PR。
在gulpfile.js中，所有字体都会移至fonts目录。为VideoJs写下额外的案例，将其字体复制到styles/font。

Gulp依赖看错文件夹

2 个答案:

更新！

可能的解决方案：