Meteor come utilizzare più file .less

Sto cercando di utilizzare due file .less in un'app Meteore. Tutti i file si trovano in una singola cartella dell'app Meteor. Ho un file che definisce .less generale UI look-and-feelMeteor come utilizzare più file .less

In 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); 
}

In myapp.less

@import "ui"; 

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

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

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

Tuttavia, nella pagina che viene servito da Meteor, ottengo:

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

    ... more stuff below ...

Il foglio di stile myapp.less non viene importato?

Desidero disporre di un file .less app in grado di importare diversi file mixin .less. Qual è il modo migliore per farlo?

fonte

2012-05-04 Josh Petitt

Non so il motivo per cui il tuo secondo file meno non sarebbe stato caricato . Ma ho visto altre discussioni su come importare raw qui -> http://stackoverflow.com/questions/10152515/external-dependencies-like-bootstrap-in-meteor. – lashleigh

perché sembra che questa questione è ancora attuale provo a rispondere.

Nelle versioni più recenti di meteora (che inizia con v0.7.1.1) .lessimport è stato deprecato. Il nuovo modo è .import.less. Il modo per ad essa è:

// client/mixins.import.less 

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

poi @import nel vostro foglio di stile che si desidera utilizzare il mixins in:

// 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); 
}

fonte

2014-05-07 20:30:50 Nemo64

Questa è ancora la risposta corretta a partire da Meteor 1.1. –

Cosa sono venuto a:

Mettere tutti i file meno nella cartella "client".

Meteor li compila, quindi non è necessario importare dichiarazioni.

L'importazione di funzioni funziona alla grande! Le variabili rompono le cose.

fonte

2012-08-29 15:55:16 EzraM

Puoi chiarire cosa intendi per "Variables break things" pls. –

Non funziona qui, non posso usare un mix da un altro file, i file sembrano essere isolati l'uno dall'altro. 'myapp.less: Minore errore del compilatore: .ui-gradient-topdown non è definito' – zVictor

Questo non funziona in Meteor 1.1. Utilizza invece un file "mymixins.import.less" e @ importalo esplicitamente, ad es. '@import ../ relative/path/mymixins.import.less'. –

Dal Meteor Docs:

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

fonte

2013-02-15 03:41:55 klamping

Anche se non riesco a farlo funzionare da solo ... Ho postato troppo presto ... – klamping

Sembra essere un bug noto che verrà risolto presto https://github.com/meteor/meteor/issues/203 – klamping

Questo funziona ora! Dovrebbe essere la risposta corretta. –

Meteor come utilizzare più file .less

risposta

Problemi correlati