LESS 파일에 대한 공통 이미지 경로를 설정하는 방법이 있습니까?

LESS 파일에 대한 공통 이미지 경로를 설정하는 방법이 있습니까?

---

LESS 스타일링 언어를 사용하고 있습니다.

다음 CSS를 고려하십시오.

.side-bg
{
    background:url(../img/layout/side-bg.jpg) top no-repeat;    
}

지금 내 모든 이미지는 ../img/변수를 이미지 경로로 설정하고 다음과 같이 사용할 수 있기를 원하는 폴더 에 있습니다.

@image-path: ../img;

.side-bg
{
    background:url(@image-path/layout/side-bg.jpg) top no-repeat;   
}

그러나 이것은 작동하지 않습니다. 큰 문제는 아니므로 이미지 폴더가 변경되면 항상 찾기 및 바꾸기를 사용할 수 있습니다. 나는 이제 막 배우기 시작했고 이와 같은 것이 가능한지 궁금했습니다.

---

이와 같은 경우 문자열 보간을 사용해보십시오. 문서 에서 "변수 보간"을 찾으십시오 .

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

---

해결책:

.side-bg
{
    background : ~"url( '@{image-path}/layout/side-bg.jpg' )" top no-repeat;
}

---

나는 같은 질문을 찾고 있었고이 페이지를 찾았습니다. 다른 사람이 유용하다고 생각할 수 있으므로 내 솔루션을 게시 할 것이라고 생각했습니다.

@iconpath: '/myicons/';

.icon (@icon) {
    background: no-repeat url('@{iconpath}@{icon}');
}

.icon-foo { .icon('foo.png'); }
.icon-bar { .icon('bar.png'); }
.icon-spuds { .icon('spuds.png'); }

컴파일되는 ( http://winless.org/online-less-compiler 사용 )

.icon-foo {
  background: no-repeat url('/myicons/foo.png');
}
.icon-bar {
  background: no-repeat url('/myicons/bar.png');
}
.icon-spuds {
  background: no-repeat url('/myicons/spuds.png');
}

---

Anton Strogonoff의 대답 은 좋지만 @ 294 문제에 유의하십시오 .

위의 문서에서 직접 가져온 것을 사용하여 url://pathtolessfile/variable설정합니다. 상대 URL 대신 절대 URL을 설정하려고하지만. 예를 들어 이것은 작동합니다

@base-url: "../../images/";
@background-image : url ("@{base-url}/bg.png");

그러나 이것은 작동하지 않습니다

$base-url: "http://localhost/ns/assets/images/";
@background-image : url ("@{base-url}/bg.png";

후자의 예에서 최종 소스 경로는

http://localhost/ns/assets/css/libs/http://localhost/ns/assets/images/bg.png

---

다음은 LESS로 이미지 경로를 처리하는 업데이트되고 깨끗한 방법입니다.

변수로 시작하십시오.

@imagePath: ~"../images/bg/";

그런 다음 다음과 같이 사용하십시오.

.main-bg { 
   background: url('@{imagePath}my-background-image.png') repeat scroll left top; 
}

Make sure the @imagePath variable points to the images folder from wherever you have your compiled CSS, NOT from where you have your LESS files. Also, you have to escape the address in the variable as in the example above to ensure that it does not get rewritten by less.js.

---

Relative urls can be handled by the command line compiler, supposedly. There's probably some similar option you can set in the file watcher.

https://github.com/cloudhead/less.js/wiki/Command-Line-Usage

EDIT: There totally is. Just look: http://lesscss.org/usage/#command-line-usage-options

relativeUrls: true

참고URL : https://stackoverflow.com/questions/6294126/is-there-a-way-to-set-a-common-image-path-for-less-files