.css 파일을 .less 파일로 가져 오기

.css 파일을 .less 파일로 가져 오기

---

.css 파일을 .less 파일로 가져올 수 있습니까?

나는 거의 익숙하지 않으며 모든 개발에 사용합니다. 정기적으로 다음과 같은 구조를 사용합니다.

@import "normalize";

//styles here

@import "mixins";
@import "media-queries";
@import "print";

모든 가져 오기는 다른 .less 파일이며 모두 정상적으로 작동합니다.

내 현재 문제는 다음과 같습니다. .css 파일에서 사용되는 스타일을 다음과 같이 .css 파일을 .less로 가져오고 싶습니다.

@import "../style.css";

.small {
    font-size:60%;
    .type;
}
// other styles here

.css 파일에는 클래스가 포함되어 .type있지만 .less 파일을 컴파일하려고하면 오류가 발생합니다.NameError: .type is undefined

.less 파일은 .css 파일을 가져 오지 않고 다른 .less 파일 만 가져 옵니까? 아니면 내가 잘못 참조하고 있습니까 ...?!

---

다음과 같은 옵션을 지정하여 파일을 특정 유형으로 해석하도록 할 수 있습니다.

@import (css) "lib";

출력합니다

@import "lib";

과

@import (less) "lib.css";

가져옵니다 lib.css파일을 덜로 취급합니다. 파일을 더 작게 지정하고 확장자를 포함하지 않으면 아무 것도 추가되지 않습니다.

---

처리하지 않고 CSS를 출력으로 복사하려면 (inline)지시문을 사용할 수 있습니다 . 예를 들어

@import (inline) '../timepicker/jquery.ui.timepicker.css';

---

css 파일의 파일 확장자를로 변경하십시오 .less. LESS를 작성할 필요는 없습니다. 모든 CSS는 유효하지 않습니다 (MS 항목을 제외하고는 탈출해야하지만 다른 문제입니다).

당 Fractalf의 대답 이 v1.4.0이 고정되어

---

버전 1.7.4에서 다음을 사용해야했습니다.

@import (less) "foo.css"

수락 된 답변은 알고 @import (css) "foo.css"있지만 작동하지 않았습니다. 새 적은 파일에서 CSS 클래스를 재사용하려면 사용 (less)하지 말고 사용해야 (css)합니다.

설명서를 확인하십시오 .

---

로부터 LESS 웹 사이트 :

If you want to import a CSS file, and don’t want LESS to process it, just use the .css extension:

@import "lib.css"; The directive will just be left as is, and end up in the CSS output.

As jitbit points out in the comments below, this is really only useful for development purposes, as you wouldn't want to have unnecessary @imports consuming precious bandwidth.

---

Try this :

@import "lib.css";

From the Official Documentation :

You can import both css and less files. Only less files import statements are processed, css file import statements are kept as they are. If you want to import a CSS file, and don’t want LESS to process it, just use the .css extension:

---

Source : http://lesscss.org/

---

If you just want to import a CSS-File as a Reference (e.g. to use the classes in Mixins) but not include the whole CSS file in the result you can use @import (less,reference) "reference.css";:

my.less

 @import (less,reference) "reference.css";
 .my-class{
     background-color:black;
     .reference-class;
     color:blue;
 }

reference.css

.reference-class{
    border: 1px solid red;
}

*Result (my.css) with lessc my.less out/my.css *

.my-class {
  background-color: black;
  border: 1px solid red;
  color: blue;
}

I'm using lessc 2.5.3

---

If you want to import a css file that should be treaded as less use this line:

.ie {
  @import (less) 'ie.css';
}

---

since 1.5.0 u can use the 'inline' keyword.

Example: @import (inline) "not-less-compatible.css";

You will use this when a CSS file may not be Less compatible; this is because although Less supports most known standards CSS, it does not support comments in some places and does not support all known CSS hacks without modifying the CSS. So you can use this to include the file in the output so that all CSS will be in one file.

(source: http://lesscss.org/features/#import-directives-feature)

참고URL : https://stackoverflow.com/questions/11196915/import-css-file-into-less-file