Libsass: @import url（http：// ...）フォントURLで失敗する

良いキャッチ。 @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";

Libsassは、リモートファイル（インターネット上のファイル）を対象とするインポートを「検証」してはなりません。 importステートメント内のURIがリモートである場合（ //シーケンスが含まれているかどうかを確認することで確認できます）、libsassはその@importステートメント全体をCSSに投げ込む必要があります。

マスターブランチであなたの例を試しましたが、インポートが出力に表示されます（ただし、LibSassはRuby Sassのようにファイルの先頭に移動しません）...過去数週間でプルしましたか？

インポートはファイルの先頭にある必要があります。 それは明らかにCSS仕様にあります： @importは一番上になければなりません。

私のiPhoneから送信された

2014年2月14日には、15:02で、アーロン・レオン[email protected]は書きました：

マスターブランチであなたの例を試しましたが、インポートが出力に表示されます（ただし、LibSassはRuby Sassのようにファイルの先頭に移動しません）...過去数週間でプルしましたか？

—
このメールに直接返信するか、GitHubで表示してください。

簡略化されたテストケース：

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

Ruby Sassは、 @importが一番上になるようにCSSを正しく再構築します。

<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とRubySassの多少関連するマイナーなバグ/違いは、次のテストの出力です。

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

ルビーサス：

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

Libsass：

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

特にこのバグから生じる問題は予測していませんが、興味深い違いがあります。

さて、これは今修正する必要があります。 ぜひお試しください。