web-dev-qa-db-ja.com

CSSおよび相対パスのLESSインポート

すべてのCSSファイルを整理してインポートするためにLESSを使用しています。また、style_lessに統合したTwitter Bootstrapも使用しています。それは以下のように正常に動作しますが、lesscを使用してlessファイルを縮小し、それを1つに圧縮すると、Twitter bootstrap 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';
cssless
19
user391986

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");
15
Planky

コマンドラインの使用法については、ドキュメントをご覧ください。 https://github.com/cloudhead/less.js/wiki/Command-Line-Usage 。既存のURLの前に付加する--root-pathというオプションがあり、出力cssファイルで機能します。

lessc [option option=parameter ...] <source> [destination]

lessc -rp=will/be/prepended sourcefile.less path/to/destination

例えば：

これは、css/src/nest内のファイルを含む元のURLです

background-image: url('../../../imgs/bg.png');

そして、これは私がコマンドラインで行うことです。 -rp引数は、出力ディレクトリから元のファイルの場所を指す必要があることに注意してください

lessc -rp=src/nest css/src/nest/nesty.less css/nesty.less

そして、css /のファイルを使用した出力

  background-image:url('src/nest/../../../imgs/bg.png')

--relative-urlsオプションがありますが、機能しません。上記の回避策を使用するビルドスクリプトを使用しています。 Build-o-Matic

これは私がパスを決定する方法でした [link]

3
posit labs