CSSと相対パスをインポートしていません

Question

すべてのCSSファイルを整理してインポートするのに、私はLESSを使用しています。私は自分のスタイルに組み込まれたTwitter Bootstrapも使用しています。しかし、lesscを使ってlessファイルを小さくして圧縮すると、すべての地獄が私の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'; 

Answer 1

コマンドラインの使用方法については、ドキュメントを参照してください。 https://github.com/cloudhead/less.js/wiki/Command-Line-Usage。 --root-pathと呼ばれるオプションがあります。このオプションは、既存のURLを前に付加して出力CSSファイルで動作させます。例えば

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

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

---

：ここ

は、CSS/SRC /巣内のファイルを、元のURLである

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

そして、これは私がコマンドラインで何をするのかであります。 CSSのファイル/

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

---

で--relative-urlsオプションがあり、-rp引数は、元のファイルの場所

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

と出力に出力ディレクトリからを指している必要がありますことに注意してくださいしかし、私はそれを働かせることはできません。私は上記の回避策を使用してビルドスクリプトを作成しています。 Build-o-Matic

これは私がlesscは--relative-urlsフラグを使用して実行する場合パス[link]

Answer 2

を決定扱う方法です。

lessc --relative-urls 

はそれは悪い文書化されていますが、デフォルトでは、すべての@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"); 

Answer 3

--relative-urlsフラグは、その中に、ブラウザの対応があります。

<script> 
less = { 
    env: "development", 
    relativeUrls: true 
}; 
</script> 
<script src="less.min.js"></script>