URL이 포함 된 파일을 잘못 가져 오기하지 않음

URL에 대한 LESS '가져 오기 전략이 CSS와 같은 상대 경로를 고려하지 않은 것으로 보입니다.URL이 포함 된 파일을 잘못 가져 오기하지 않음

test.less

@import "sub/test.less"; 
div.a { 
    background-image:url('imagea.jpg'); 
}

sub/test.less

div.b { 
    background-image:url('imageb.jpg'); 
}

output.css

div.b { 
    background-image:url('imageb.jpg'); 
} 
div.a { 
    background-image:url('imagea.jpg'); 
}

correct_output.css

div.b { 
    background-image:url('sub/imageb.jpg'); 
} 
div.a { 
    background-image:url('imagea.jpg'); 
}

LessJS에서이 동작을 수행 할 수있는 방법이 있습니까? 아니면 구현시 버그입니까?

출처

2012-03-09 Kendall Hopkins

확실히 [알려진 문제] (https://github.com/cloudhead/less.js/issues/132)처럼 보입니다. –

이것은 fixed here입니다. 을 자세히 매우 간단히 usage에서, 여기에 수정 프로그램을 적용하는 방법은 다음과 같습니다

<script type="text/javascript"> 
    less = { 
     relativeUrls: true 
    }; 
</script> 
<script src="less.js" type="text/javascript"></script>

매우 적은 이미이 작업을 수행하지 않았다 관련된 것. CSS에서 이전 버전과의 호환성 (LESS가 유효한 CSS 여야 함)이 중요하다고 생각할 수 있습니다.

출처

2013-05-26 06:02:26

나는 relativeUrls가 실제로 의미가 있음을 강력히 동의합니다. 그러나'@import url ("sub/test.less")'를 쓰고'relativeUrls : true'로 컴파일하면 urls의 경로가 두 번 다시 작성된다는 점에주의하십시오. 그래서'relativeUrl'을 켜고 컴파일하는 것을 권장합니다. 그러나 미쳐 가고 싶지 않다면, 적은'@ import' 문 안에'url (..)'을 피하십시오;) – Luke

해결 방법 : 일치하는 디렉토리 계층 구조를 확인하십시오.

~/root/lib/css/output.css 
~/root/lib/less/test.less 
~/root/images/imagea.jpg 
~/root/images/imageb.jpg

css 디렉토리에 출력되는 파일이 적습니다. 좋은 디렉토리 구조를 갖는 것 외에도 CSS 파일의 상대 경로가 일치하여 제대로 작동합니다.

출처

2012-03-09 20:21:18 gmeben

그래서 해결책은 단지 "그것을 다루는 것"입니다. –

다소 차이가 있습니다. 내가 언급 한 디렉토리 구조를 항상 사용해 왔기 때문에 결과적으로이 버그가 발생하지 않았기 때문에이 주제를 가지고 다행이라고 생각합니다. 경계가있는 곳과 그 경계를 피하는 방법을 아는 것이 유용합니다. – gmeben

이것은 끔찍한 일입니다 ... 물론 그럴 수는 없습니다! –

URL이 포함 된 파일을 잘못 가져 오기하지 않음

답변

관련 문제