Question

我在使用Bootstrap scss的Jekyll网站上使用glyphicons时遇到了问题。它似乎错误地生成了路径，但我无法弄清楚问题所在。

当我尝试包含一个glyphicon时，Jekyll会出现以下错误

ERROR `/fonts/bootstrapglyphicons-halflings-regular.woff2' not found.

glyphicon字体的路径错误，错过了＆＃39; /＆＃39;并应阅读

/fonts/bootstrap/glyphicons-halflings-regular.woff2

我尝试在生成的css文件中对此进行更正并且它有效，所以我现在正试图找到生成错误路径的位置。

我查看了_glyphicons.scss文件，以下代码似乎正在生成路径

@at-root {
  // Import the fonts
  @font-face {
    font-family: 'Glyphicons Halflings';
    src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot'), '#{$icon-font-path}#{$icon-font-name}.eot'));
    src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot?#iefix'), '#{$icon-font-path}#{$icon-font-name}.eot?#iefix')) format('embedded-opentype'),
         url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff2'), '#{$icon-font-path}#{$icon-font-name}.woff2')) format('woff2'),
         url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff'), '#{$icon-font-path}#{$icon-font-name}.woff')) format('woff'),
         url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.ttf'), '#{$icon-font-path}#{$icon-font-name}.ttf')) format('truetype'),
         url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}'), '#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}')) format('svg');
  }
}

我也查看了_variables.scss并发现了这个

$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;

我无法查看代码中的错误位置。我对scss不是很熟悉，这是我的第一次去。任何人都可以指出我正确的方向。

Answer 1

我之前遇到过这个问题，在导入类似这样的bootstrap之前我覆盖了路径。可能不是理想的答案，但可能是一种解决方法。

$icon-font-path: "fonts/bootstrap/" !default;
@import "_bootstrap";

Answer 2

此问题通常与变量SCSS文件的加载顺序有关。在文件的其他部分中查找$ icon-font-path，然后检查/是否丢失。

之后，将$ icon-font-path的内容更改为任何内容，以测试是否正在加载文件，请重新读取错误消息以查看路径是否已更改。

在变量文件中，您有$ icon-font-path变量，引导程序3将在其中查找字形图标字体。但是，编译该文件时，需要在引导样式表之前加载您的variables.scss文件。

在我的情况下，文件顺序是这样工作的：

@import "variables";
@import '../bootstrap/assets/stylesheets/bootstrap';

检查第二行是否在变量之前，如果是，则必须将其更改为与我的顺序相同。

此问题也可能与错误消息有关：无法加载资源：服务器以404（未找到）状态响应：glyphicons-halflings-regular.woff

Answer 3

对于仍然存在问题的用户，请尝试：在文件：_variable.scss中，如果您在第83行中查找，则路径（../fonts/bootstrap/）不正确，因为字体文件夹不在样式表文件夹中，因此，您必须退后一步，然后重新进入文件夹（字体）。因此有必要进行以下更改：

第83行：添加（../），使其变为：

> $ icon-font-path: if ($ bootstrap-sass-asset-helper, "bootstrap /","../../fonts/bootstrap/")! default;

Bootstrap scss glyphicons路径错误，路径中缺少反斜杠

3 个答案: