20

LESSを使用して、すべてのCSSファイルを整理およびインポートしています。また、style.lessに統合したTwitterBootstrapを使用しています。以下のように正常に動作しますが、lesscを使用してlessファイルを縮小し、それを1つに圧縮すると、Twitterのブートストラップcssですべての地獄が解き放たれます。その理由は、bootstrap.min.css画像への相対パスがある"../img"ため、これらすべてのファイルを縮小して出力ファイルをダンプすると、このパスが見つからなくなるためです。

これをどの程度正確に修正する必要がありますか？cssに絶対URLをハードコーディングしたくないですか？

style.less
    @import './folder_one/file_one';
    @import './folder_one/file_two';
    @import './folder_two/file_one';
    @import './folder_three/file_one';
    // this bootstrap css references images relatively ../img/
    @import './bootstrap/bootstrap.min.css';
4

4 に答える 4

16

lessc を実行するときは、--relative-urlsフラグを使用します。

lessc --relative-urls

ドキュメント化されていませんが、デフォルトでは false です。これは、すべての @imported ファイルが URL (背景画像、フォントフェイスなど) をそのまま維持することを意味します。これは、すでにこれを行っている人が少なく、多くのユーザーが自分の URL をそのままにしておくことを期待しているためです。

relative-urls フラグを使用すると、lessc は、インポートされる less/css ファイルの場所に従ってすべての URL を書き換えます。

例

/dir1/style/main.less

// if you don't include (less) lessc will leave bootstrap
//   as an @import at the top of the lessified css file
@import (less) '../bootstrap/bootstrap.min.css';

/dir1/lib/bootstrap/bootstrap.min.css

background-image:url("../img/bs-img.gif");

結果：

/dir1/style/main.css

background-image:url("../bootstrap/img/bs-img.gif");
于 2014-06-04T21:31:29.643 に答える
1

私はちょうどこの問題を抱えていて、それを解決しました。解決策は、../インポートするスタイル シートが見つかるまでそのパスの先頭に追加することです。ここを見て ：

ここに画像の説明を入力

次に../、必要なディレクトリにエスケープして機能するまで、複数回追加しました

ここに画像の説明を入力

于 2020-11-19T09:32:34.920 に答える