css (Jekyll)의 루트 경로

Question

{{root_url}} 변수를 사용하여 내 웹 사이트 (Jekyll)의 루트 경로 (/)에 액세스합니다. 예를 들면. 나는 그것을 사용하여 외부 CSS 파일의 경로를 포함 할 수 있습니다.

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

그러나 내 CSS/main.css가에, 나는 예를 들어, 액세스를 {{root_url}} 기운 다.

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

CSS에서 {{root_url}}이 (가) 액세스 할 수 없으므로 이미지가 표시되지 않습니다. CSS 내부에서 {{root_url}}에 어떻게 액세스 할 수 있습니까?

Answer 1

상대 경로를 사용할 수 있습니다. CSS 깊은 하위 폴더 한 수준에 있기 때문에, 당신은이 작업을 수행 할 수 있습니다 :

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); 
}