2012-03-09 11 views
5

URLのLESSのインポート戦略は、CSSと同じ相対パスを考慮していないようです。URLでファイルを間違ってインポートすることがありません

test.less

@import "sub/test.less"; 
div.a { 
    background-image:url('imagea.jpg'); 
} 

sub/test.less

div.b { 
    background-image:url('imageb.jpg'); 
} 

output.css

div.b { 
    background-image:url('imageb.jpg'); 
} 
div.a { 
    background-image:url('imagea.jpg'); 
} 

correct_output.css

div.b { 
    background-image:url('sub/imageb.jpg'); 
} 
div.a { 
    background-image:url('imagea.jpg'); 
} 

LessJSからこの動作を取得する方法はありますか、これは実装上のバグですか?

+0

確かに[既知の問題](https://github.com/cloudhead/less.js/issues/132)のように見えます。 –

答えて

4

これはfixed hereと思われます。詳細usageの下で非常に簡単に説明したように、ここでは修正プログラムを適用する方法は次のとおりです。

<script type="text/javascript"> 
    less = { 
     relativeUrls: true 
    }; 
</script> 
<script src="less.js" type="text/javascript"></script> 

かなりLESSはすでにこれを実行しなかったことについてです。 CSSからLESSへの下位互換性(有効なCSSは有効なLESSでなければならない)が重要だと思います。

+0

私は確かに、relativeUrlsは確かに意味があります。 '@import url(" sub/test.less ")'を書いて 'relativeUrls:true'でコンパイルすると、urlsのパスが2回書き換えられることに注意してください。 'relativeUrl'をオンにしてコンパイルすることをお勧めしますが、あなたが夢中になりたくない場合は、' @ import'文の中で 'url(..)'を避けてください。 – Luke

1

回避方法:ディレクトリ階層の一致を確認してください。

~/root/lib/css/output.css 
~/root/lib/less/test.less 
~/root/images/imagea.jpg 
~/root/images/imageb.jpg 

cssディレクトリに出力されるファイルの量を減らしてください。適切なディレクトリ構造を持つことに加えて、cssファイルの相対パスは一致して正しく動作します。

+1

それでは解決策は "それを扱う"ということですか? –

+0

多かれ少なかれ。私は常に上記のディレクトリ構造を使用していたので、以前はこのバグに遭遇したことがなかったので、このトピックを上げてくれてうれしいです。境界がどこにあるのか、それを回避する方法を知ることは有益です。 – gmeben

+1

これは恐ろしいです...確かにそれはできません! –

関連する問題