Meteor cách sử dụng nhiều tệp .less

Tôi đang cố sử dụng hai tệp .less trong ứng dụng Meteor. Tất cả các tệp đều nằm trong một thư mục ứng dụng Meteor. Tôi có một file .less định nghĩa giao diện người dùng chung look-and-feelMeteor cách sử dụng nhiều tệp .less

Trong ui.less:

.ui-gradient-topdown(@from, @to) { 
    background-color: @from; 

    /* Safari 4+, Chrome 1-9 */ 
    background-image: -webkit-gradient(linear, 0% 0% 0% 100%, from(@from), to(@to)); 

    /* Safari 5.1+, Mobile Safari, Chrome 10+ */ 
    background-image: -webkit-linear-gradient(top, @from, @to); 

    /* Firefox 3.6+ */ 
    background-image: -moz-linear-gradient(top, @from, @to); 

    /* IE 10+ */ 
    background-image: -ms-linear-gradient(top, @from, @to); 

    /* Opera 11.10+ */ 
    background-image: -o-linear-gradient(top, @from, @to); 
}

Trong myapp.less

@import "ui"; 

html { 
    min-height: 100%; 
    min-width: 320px; 
} 

body { 
    .ui-gradient-topdown(#000, #FFF); 
} 

#new_message_input { 
    background: #F00; 
    overflow: scroll; 
}

Tuy nhiên, trong trang đó được phục vụ lên bởi Meteor, tôi nhận được:

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="/ui.less.css"> 

    ... more stuff below ...

Biểu định kiểu myapp.less không được nhập?

Tôi muốn có một ứng dụng .less tệp có thể @import các tệp mixin .less khác nhau. Cách tốt nhất để làm việc này là gì?

Nguồn

2012-05-04 Josh Petitt

Tôi không biết lý do tại sao tập tin ít thứ hai của bạn sẽ không được nạp . Nhưng tôi đã thấy các cuộc thảo luận khác về cách nhập thô ít ở đây -> http://stackoverflow.com/questions/10152515/external-dependencies-like-bootstrap-in-meteor. – lashleigh

Bởi vì nó có vẻ như câu hỏi này vẫn còn hiện tại tôi cố gắng trả lời nó.

Trong các phiên bản mới hơn của sao băng (bắt đầu bằng v0.7.1.1) .lessimport không được chấp nhận. Cách mới là .import.less. Đường vào nó là:

// client/mixins.import.less 

.opacity(@opacity) { 
    opacity: @opacity; 
    // IE8 filter 
    @opacity-ie: (@opacity * 100); 
    filter: ~"alpha([email protected]{opacity-ie})"; 
}

sau đó @import nó trong stylesheet của bạn, bạn muốn sử dụng mixins trong:

// client/main.less 

@import "mixins.import.less"; 
// relative to the current file 
// if absolute it will be relative to your project root 

.some-div { 
    .opacity(0.5); 
}

Nguồn

2014-05-07 20:30:50 Nemo64

Đây vẫn là câu trả lời đúng như Meteor 1.1. –

Tôi đã đến:

Đặt tất cả các tệp ít hơn vào thư mục "ứng dụng khách".

Meteor biên dịch chúng, do đó không cần nhập câu lệnh.

Chức năng nhập hoạt động tốt! Các biến phá vỡ mọi thứ.

Nguồn

2012-08-29 15:55:16 EzraM

Bạn có thể làm rõ những gì bạn có nghĩa là bằng cách "Variables break things" pls. –

Nó không hoạt động ở đây, tôi không thể sử dụng một mixin từ một tập tin khác, các tập tin dường như bị cô lập với nhau. 'myapp.less: Ít lỗi trình biên dịch: .ui-gradient-topdown không được xác định là – zVictor

Điều này không hoạt động trong Meteor 1.1. Thay vào đó, hãy sử dụng tệp "mymixins.import.less" và @import một cách rõ ràng, ví dụ: '@import ../ relative/path/mymixins.import.less'. –

Từ Meteor Docs:

If you want to @import a file, give it the extension .lessimport to prevent Meteor from processing it independently.

Nguồn

2013-02-15 03:41:55 klamping

Mặc dù tôi dường như không thể tự mình làm việc này ... Tôi đã đăng quá sớm ... – klamping

Dường như là một lỗi đã biết sẽ được khắc phục sớm https://github.com/meteor/meteor/issues/203 – klamping

Điều này hoạt động ngay bây giờ! Nên là câu trả lời đúng. –

Meteor cách sử dụng nhiều tệp .less

Trả lời

Các vấn đề liên quan