Libsass: @import url(http://...) 字体 URL 失败

创建于 2014-02-14 · 6评论 · 资料来源: sass/libsass

在我的 Scss 文件中，我有这一行：
<strong i="6">@import</strong> url(http://fonts.googleapis.com/css?family=Titillium+Web:400,300,200,600);

实际结果：

当文件与libsass编译时，@import线完全抹杀并没有出现在输出文件中。

预期成绩：

@import行应该逐字复制到最终的 CSS 文件中，因为它不针对本地文件。它需要出现在 CSS 文件中，以便正确加载我的字体。

Ruby Sass 行为正确。它将@import语句逐字移动到已编译的 CSS 文件中。

技术说明：

在解决这个问题时，仅测试http://的存在是不够的。很多时候，人们会使用无协议的 URL，以便导入可以在 HTTP 和 HTTPS 页面上工作。这方面的一个例子是：

<strong i="20">@import</strong> url(//path/to/some/file.css);

需要将语句前的双斜杠视为 Internet 上远程资源的 URL，因此，需要将这个@import语句逐字放置在已编译的 CSS 文件中。

Dev - Test Written

资料来源

bdkjones

最有用的评论

一个简化的测试用例：

.test {
    content: '';
}
<strong i="6">@import</strong> url('test.css');

Ruby Sass 正确地重构了 CSS，使得@import (s) 位于顶部：

<strong i="11">@import</strong> url("test.css");
.test {
  content: ''; }

Libsass 错误地产生：

.test {
  content: ''; }

<strong i="15">@import</strong> url('test.css');

如上所述， CSS 规范说：“任何@import规则必须先于所有其他规则（ @charset规则除外，如果存在）。”

根据 Sass 的结构，此错误可能并且会产生代码，其中@import规则未正确插入 CSS 输出并随后被忽略。

Libsass 和 Ruby Sass 中一个稍微相关的小错误/差异是以下测试的输出：

<strong i="26">@import</strong> "//example.com/test.css";

红宝石萨斯：

<strong i="30">@import</strong> "//example.com/test.css";

利萨斯：

<strong i="34">@import</strong> url("//example.com/test.css");

我不认为这个 bug 会引起任何问题，但是需要注意一个有趣的区别。

joeyhoer 于 2014-03-05

👍2

所有6条评论

接得好。您也可以@import一个.css文件，但它看起来像是在明确检查.css扩展名。以下可以作为解决方法：

<strong i="9">@import</strong> "http://fonts.googleapis.com/css?family=Titillium+Web:400,300,200,600.css";

但实际上，这也应该有效：

<strong i="13">@import</strong> "http://fonts.googleapis.com/css?family=Titillium+Web:400,300,200,600";

kennethormandy 于 2014-02-14

👍2

Libsass 不应“验证”针对远程文件（互联网上的文件）的导入。如果 import 语句中的 URI 是远程的（可以通过查看它是否包含//序列来确定），那么 libsass 应该将整个@import语句扔到 CSS 中。

bdkjones 于 2014-02-14

👍1

我在 master 分支上尝试了你的例子，并且导入出现在输出中（尽管 LibSass 没有像 Ruby Sass 那样将它移到文件的顶部）......你在过去几周内拉了吗？

akhleung 于 2014-02-15

导入必须位于文件的顶部。这在 CSS 规范中很清楚： @import必须在顶部。

从我的iPhone发送

2014 年 2 月 14 日下午 3:02，Aaron Leung [email protected]写道：
我在 master 分支上尝试了你的例子，并且导入出现在输出中（尽管 LibSass 没有像 Ruby Sass 那样将它移到文件的顶部）......你在过去几周内拉了吗？
—
直接回复此邮件或在 GitHub 上查看。

bdkjones 于 2014-02-16