cssのルートパス

Question

私は自分のウェブサイト（Jekyll）のルートパス（/）にアクセスするために変数{{root_url}}を使用しています。たとえば。私はそれを使用して外部のCSSファイルのパスを含めることができます。

<link rel="stylesheet" href="{{ root_url }}/css/main.css"> 

は、しかし、私のCSS /のmain.cssに、私は、例えばのためのアクセスを{{}} root_url傾きます。

input { 
    background: url(/{{ root_url }}/img/search-icon.png); 
} 

イメージは表示されません。{{root_url}}はCSS内でアクセスできないため、画像は表示されません。 css内で{{root_url}}にアクセスするにはどうすればよいですか？

Answer 1

相対パスを使用できます。 CSSが深いサブフォルダ1レベルであるので、あなたはこれを行うことができます：

input { 
    background: URL(../img/search-icon.png) 
} 

Answer 2

のみジキルによって液体に処理される前に関係を持つファイル。

あなたはCSSで液体を使用する場合は、あなたがあなたのcss/main.cssに前付（でも空）を追加する必要があります。

--- 
# this is an empty front matter that instruct jekyll 
# to process this file with liquid 
--- 
input { 
    background: url(/{{ root_url }}/img/search-icon.png); 
}