Gulp 依赖项在错误的文件夹中查找

Question

长话短说；博士字体已移动到正确的文件夹，但引用错误

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

浏览器指向/dist/styles/font/vjs.woff而文件指向/dist/fonts/vjs.woff

我是运行一个带有 Wordpress 主题 Sage (https://roots.io/sage/) 并内置 gulpfile.js 的 Wordpress 网站，我对 [=40= 没有太多经验] 否则。

设置这些错误的 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

p.s。我注意到引用 fonts（复数）文件夹的字体得到了正确处理

Answer 1

我认为这些项目对生成的 css 文件的位置有不同的假设。 wordpress 主题假定它位于目录 fonts 旁边的 styles 目录中，这意味着所有对字体的引用都将以 ../fonts 开头（如 _variables.scss), now videojs assumes the css file to be itself located next to the font (or fonts) directory, so paths start with just font/ (as defined in video-js.scss 中所定义） .我会说你必须改变一个以匹配另一个。

Answer 2

更新！

此语法 (!default) 已在 my PL 后合并到 master 分支。如果将 video.js 版本更改为 master 并重新安装，它应该可以正常工作。

bower.json:

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

注意：建议您在新版本发布后改成固定版本。

在 Sage 项目中，main.scss imports custom variables and font path via _variables.scss。

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

然后导入所有 bower 样式组件。但是在 VideoJs 项目中，变量没有像 bootstrap 项目那样使用 !default 语法定义。这会导致 video-js.scss 文件中的字体路径变量被覆盖。该项目中的所有变量都应该使用 !default 语法定义，例如：

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

可能的解决方案：

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

Gulp 依赖项在错误的文件夹中查找

Gulp dependency looking in wrong folder

video.js

bower

gulp

更新！

可能的解决方案：