CSS와 상대 경로 가져 오기가 더 적습니다.

모든 CSS 파일을 구성하고 가져 오는 데 LESS를 사용하고 있습니다. 나는 또한 내 스타일 안에 통합 된 트위터 부트 스트랩을 사용하고있다. 그것은 아래처럼 잘 작동하지만 lessc를 사용하여 더 적은 파일을 축소하고 하나에 압축하면 모든 트위터의 부트 스트랩 CSS로 느슨해집니다. 그 이유는 내 bootstrap.min.css은 이미지에 대한 상대 경로가 "../img"이므로 이러한 모든 파일을 축소하고 출력 파일을 덤프 할 때 더 이상이 경로를 찾지 못하기 때문입니다.CSS와 상대 경로 가져 오기가 더 적습니다.

정확히 어떻게 수정해야합니까, 내 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';

출처

2012-10-10 user391986

나는 당신에게'.htaccess'를 사용하도록 권합니다. –

명령 줄 사용에 대한 문서를 확인하십시오. 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');

그리고 이것은 내가 명령 줄에서 할 것 인 것이다 . -rp 인수가 --relative-urls 옵션이/

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

CSS에서 파일과 원본 파일 위치

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

그리고 출력에 출력 디렉토리에서 를 가리켜 야합니다 ,하지만 나는 그것을 작동시킬 수 없습니다. 위에서 설명한 해결 방법을 사용하는 빌드 스크립트를 작성 중입니다. Build-o-Matic

이 내가 lessc이 --relative-urls 플래그를 사용하여 실행하는 경우 경로 [link]

출처

2013-04-05 21:09:31

상대 경로를 사용하거나 플래그 -ru 또는 --relative-urls를 추가해보십시오. 내 경우에는 lessc 1.4.0을 사용하여 작동했습니다. – user1

오른쪽. 나는 그것을 언급했다. 이 해결 방법의 모든 이유는 -ru 옵션이 작동하지 않기 때문입니다. –

을 결정하는 처리 방법이다.

lessc --relative-urls

것은이 제대로 문서화,하지만 기본적으로 모든 @imported 파일은 그대로 해당 URL (예를 들어, 배경 이미지, 글꼴 얼굴, 등)을 유지한다는 것을 의미하는 false입니다. 이미이 작업을 수행하는 횟수가 적기 때문에 많은 사용자가 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");

출처

2014-06-04 21:31:29 Planky

-1

--relative-urls 플래그는에서 브라우저 대응이 있습니다.

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

출처

2017-01-27 09:21:02 sanmai

CSS와 상대 경로 가져 오기가 더 적습니다.

답변

관련 문제