12

Web サイトのスタイルシートとして LESS を使用しているときに問題に直面しています。個人的には CSS で絶対パスよりも相対パスを使用したいのですが (あくまで私の習慣です)、インポート機能で LESS を使用すると、次のように問題が発生します。

main.lessルートフォルダーにファイルがあります

@import "inc/inc.less";

inc.lessおよびフォルダー内のファイルinc

.homeBgr {  
    background: url('icons/Home.gif');
}

画像Home.gifはフォルダにあります/root/inc/icons

 - main.less
      - inc
         - inc.less
         - icons
            - Home.gif

lessc出力は

.homeBgr {  
    background: url('icons/Home.gif');
}

ただし、私の予想は

.homeBgr {  
   background: url('inc/icons/Home.gif');
}

クライアント コンパイラとして less.js を使用すると期待どおりの出力が得られましたが、 を使用するlesscとそうではありません。

誰かが同じ問題を抱えていて、これに対する解決策がありますか? または、実際に、これを機能させる方法に関する提案。前もって感謝します。

4

3 に答える 3

6

.lessのエスケープ機能を使用する必要があります。こんな感じになります。これが機能せず、ルートフォルダに調整する必要がある場合は、Firebugを実行するか、chromesfirebugのようなものを使用してパスを確認します。ただし、エスケープした後は少なくとも調整できます。

background: ~"url('inc/icons/Home.gif')";
于 2012-05-22T03:09:02.690 に答える
2

main.less をルートに置き、その他の less ファイルを /inc に置く代わりに、less ファイルをすべて「css」、「styles」、または「less」フォルダーに入れます。次に、「../icons/home.gif」を実行して、画像への一貫した相対パスを使用できます

于 2012-05-22T10:40:50.450 に答える
1

相対イメージ パスは、LESS ファイルではなく、生成された CSS ファイルに関連します。

于 2014-11-25T08:57:43.173 に答える