$ icon-font-path如何在bootstrap scss中运行？

Question

我最近开始在我的节点项目上使用bootstrap SCSS.所以我app/bower_components/bootstrap-sass/lib/_glyphicons.scss举个例子.

看看我的CSS输出,我看到的内容如下:

@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/some\/path\/project\/app\/bower_components\/bootstrap-sass\/lib\/_normalize\.scss}line{font-family:\0000332}}
audio,
canvas,
video {
  display: inline-block;
}

我有两个问题:

1. 这似乎是一个安全漏洞.每个人都可以通过查看我的CSS来推断出我的操作系统和目录结构.关闭此安全漏洞的正确方法是什么？
2. 它是如何工作的？我差点搞清楚,但我错过了一些东西.看看SCSS,我看到bootstrap正在使用$icon-font-path,它显然变成了这个绝对路径.看看指南针文档,我看到它们提供绝对值,但没有$icon-font-path

这是我所指的一段代码:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('#{$icon-font-path}#{$icon-font-name}.eot');
  src: url('#{$icon-font-path}#{$icon-font-name}.eot?#iefix') format('embedded-opentype'),
       url('#{$icon-font-path}#{$icon-font-name}.woff') format('woff'),
       url('#{$icon-font-path}#{$icon-font-name}.ttf') format('truetype'),
       url('#{$icon-font-path}#{$icon-font-name}.svg#glyphicons-halflingsregular') format('svg');
}

Answer 1

两个答案都是正确的.总结一下,没有magic.Bootstrap $icon-font-path使用默认值初始化.

如果你在一个需要不同值的经理中include引导SCSS,$icon-font-path你也应该覆盖它们的默认值.

语法$icon-font-path: some_value !default;表示 - 如果尚未设置,则使用此值.

因此,当您包括时,您应该执行以下操作

/* override icon-font-path value and include scss */
$icon-font-path: bower_components/bootstrap/fonts; 
@include bower_components/bootstrap/bootstrap.scss;

在实际场景中,路径可能不同.

这似乎是发布可重用SCSS模块的标准机制.

Answer 2

这是变量文件,它们设置$icon-font-path变量.

它看起来像$icon-font-path设置为字体文件的foldername.不一定是安全漏洞,因为它是字体的相对路径.

Answer 3

混乱-sass-debug-info是基本的“源映射”，因此浏览器开发人员工具可以向您显示生成该 CSS 的 Sass 规则的原始行号和文件名（而不是生成的 CSS 的行号）。

Firebug 有一个 FireSass 插件可以理解这些注释。我认为Chrome 具有内置支持，但它可能位于实验性标志后面。

它与字体无关；font-family使用它只是因为它是一种将字符串推入 CSS 的简单方法，并且 JavaScript 仍然可以访问它，而不会实际影响文档的呈现。它也与 Bootstrap 无关；这是scss编译器的一部分。

它不会出现在压缩输出中，我希望您在生产中使用它。:)