nhập ít tệp hơn vào một tệp khác nhưng không bao gồm nội dung của nó

Question

Tôi có hai tệp ít hơn. một tên main.less nhập bootstrap.less (bao gồm các biến bootstrap ..vv) và dash.less chỉ có kiểu cho trang tổng quan của tôi. Hai tệp này sẽ tạo hai tệp css. main.css và dash.css.

Tôi bao gồm main.css vào tất cả các trang của tôi và dash.css chỉ vào trang tổng quan.

Điều tôi đang cố gắng thực hiện là: biên dịch main.less với các biến khởi động được bao gồm trong tệp main.css. Sau đó biên dịch dash.less bằng cách sử dụng các biến bootstrap.less trong dash.css. Tuy nhiên điều này sẽ cho kết quả nội dung của bootstrap.less được bao gồm một lần nữa trong dash.css mà tôi không muốn vì tôi đã bao gồm main.css trong html của mình.

Có ai từng biết điều này không?

Sau khi thử một số phương pháp, quyết định của tôi là sử dụng tác vụ grunt để xóa các khối css trùng lặp.

Answer 1

Tìm một cách. Tôi đã phải sử dụng tính năng nhập như sau:

@import (reference) "bootstrap.less"; 

.myclass{color:@bootstrap-variable;} 
.anotherclass{.classDefinedInBootstrapLessWhichUsesAVariableDefinedInVariablesLess} 

Sử dụng "tham chiếu" sẽ nguồn tệp đã nhập nhưng không bao gồm tệp.

Answer 2

Biên dịch tất cả các tệp ít thành một tệp sẽ tốt. Nhưng nếu bạn muốn có các biến của bootstrap.less trong dash.less. Sau đó, có một giải pháp, nếu bạn nhìn thấy trong bootstrap với ít bãi trong bootstrap.less, thành phần file khôn ngoan ít có như -

// Core variables and mixins 
@import "variables.less"; 
@import "mixins.less"; 

// Reset 
@import "normalize.less"; 
@import "print.less"; 

etc.so nếu bạn muốn sử dụng các biến bạn có thể nhập '@import " variables.less "'trong' dash.less 'của bạn thats it :)