nhập tệp .css vào tệp .less

Bạn có thể nhập tệp .css vào tệp .less ...?

Tôi khá quen thuộc với ít hơn và sử dụng nó cho tất cả sự phát triển của tôi. Tôi thường xuyên sử dụng một cấu trúc như sau:

@import "normalize";

//styles here

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

Tất cả các mục nhập là các tệp .less khác và tất cả đều hoạt động như bình thường.

Vấn đề hiện tại của tôi là: Tôi muốn nhập tệp .css vào .less mà các kiểu tham chiếu được sử dụng trong tệp .css như sau:

@import "../style.css";

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

Tệp .css chứa một lớp được gọi .typenhưng khi tôi cố gắng biên dịch tệp .less thì tôi gặp lỗiNameError: .type is undefined

Tệp .less sẽ không nhập tệp .css, chỉ các tệp .less khác ...? Hay là tôi nói nó sai ...?!

Bạn có thể buộc một tệp được hiểu là một loại cụ thể bằng cách chỉ định một tùy chọn, ví dụ:

@import (css) "lib";

sẽ xuất

@import "lib";

và

@import (less) "lib.css";

sẽ nhập lib.csstệp và coi nó là ít hơn. Nếu bạn chỉ định một tệp ít hơn và không bao gồm phần mở rộng, sẽ không có phần mở rộng nào.

Nếu bạn muốn CSS của bạn được sao chép vào đầu ra mà không được xử lý, bạn có thể sử dụng lệnh (inline)này . ví dụ,

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

Tôi đã phải sử dụng như sau với phiên bản 1.7.4

@import (less) "foo.css"

Tôi biết câu trả lời được chấp nhận là @import (css) "foo.css"nhưng nó không hoạt động. Nếu bạn muốn sử dụng lại lớp css của mình trong tệp mới ít hơn, bạn cần sử dụng (less)và không (css).

Kiểm tra tài liệu .

Thay đổi phần mở rộng tập tin của tập tin css của bạn thành .less. Bạn không cần phải viết bất kỳ BÀI HỌC nào trong đó; tất cả CSS là LESS hợp lệ (ngoại trừ nội dung MS mà bạn phải thoát, nhưng đó là một vấn đề khác.)

Câu trả lời của mỗi Fractalf này được sửa trong v1.4.0

Từ trang web LESS :

Nếu bạn muốn nhập tệp CSS và không muốn LESS xử lý tệp đó, chỉ cần sử dụng tiện ích mở rộng .css:

@import "lib.css"; Lệnh sẽ chỉ còn lại và kết thúc ở đầu ra CSS.

Như jitbit chỉ ra trong các bình luận bên dưới, điều này thực sự chỉ hữu ích cho mục đích phát triển, vì bạn sẽ không muốn có @importbăng thông quý giá không cần thiết .

Thử cái này :

@import "lib.css";

Từ Tài liệu chính thức:

Bạn có thể nhập cả css và ít tập tin hơn. Chỉ có ít câu lệnh nhập tệp được xử lý, câu lệnh nhập tệp css được giữ nguyên. Nếu bạn muốn nhập tệp CSS và không muốn LESS xử lý tệp đó, chỉ cần sử dụng tiện ích mở rộng .css:

Nguồn: http://lesscss.org/

Nếu bạn chỉ muốn nhập Tệp CSS làm Tài liệu tham khảo (ví dụ: để sử dụng các lớp trong Mixins) nhưng không bao gồm toàn bộ tệp CSS trong kết quả bạn có thể sử dụng @import (less,reference) "reference.css";:

của tôi

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

tài liệu tham khảo.css

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

* Kết quả (my.css) với lessc my.less out/my.css*

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

Tôi đang sử dụng lessc 2.5.3

Nếu bạn muốn nhập một tệp css nên được sử dụng vì ít sử dụng dòng này:

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

vì 1.5.0 u có thể sử dụng từ khóa 'nội tuyến'.

Ví dụ: @import (nội tuyến) "không tương thích.css";

Bạn sẽ sử dụng điều này khi một tệp CSS có thể không tương thích; điều này là do mặc dù Ít hỗ trợ hầu hết các tiêu chuẩn CSS được biết đến, nhưng nó không hỗ trợ nhận xét ở một số nơi và không hỗ trợ tất cả các bản hack CSS đã biết mà không sửa đổi CSS. Vì vậy, bạn có thể sử dụng điều này để bao gồm tệp trong đầu ra để tất cả CSS sẽ nằm trong một tệp.

(nguồn: http://lesscss.org/features/#import-directives-feature )