Meteor cómo usar múltiples archivos .less

Estoy tratando de usar dos archivos .less en una aplicación Meteor. Todos los archivos están en una sola carpeta de la aplicación Meteor. Tengo un archivo .less que define la interfaz de usuario en general look-and-feelMeteor cómo usar múltiples archivos .less

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

En myapp.less

@import "ui"; 

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

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

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

Sin embargo, en la página que se sirve por Meteor, me sale:

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

    ... more stuff below ...

La hoja de estilo myapp.less no se importa?

Quiero tener un archivo .less de la aplicación que pueda @importar varios archivos mixin .less. ¿Cuál es la mejor manera de hacer esto?

Fuente

2012-05-04 Josh Petitt

No sé por qué no se ha cargado el archivo segundos menos . Pero he visto otra discusión sobre cómo importar crudo menos aquí -> http://stackoverflow.com/questions/10152515/external-dependencies-like-bootstrap-in-meteor. – lashleigh

porque parece que esta pregunta sigue siendo actual Trato de responder a ella.

En las versiones más nuevas de meteor (a partir de v0.7.1.1) .lessimport obsoleto. La nueva forma es .import.less. La manera de que se trata:

// client/mixins.import.less 

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

continuación @import en su hoja de estilo que desea utilizar su mixins en:

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

Fuente

2014-05-07 20:30:50 Nemo64

Esta sigue siendo la respuesta correcta a partir de Meteor 1.1. –

Lo que he llegado a:

Colocar todos menos archivos en la carpeta de "cliente".

Meteor los compila, por lo tanto no hay necesidad de declaraciones de importación.

¡La importación de funciones funciona de maravilla! Las variables rompen cosas.

Fuente

2012-08-29 15:55:16 EzraM

Puedes aclarar a qué te refieres con "Variables break things" pls. –

No funciona aquí, no puedo usar una mezcla de otro archivo, los archivos parecen estar aislados el uno del otro. 'myapp.less: Menos error del compilador: .ui-gradient-topdown no está definido' – zVictor

Esto no funciona en Meteor 1.1. Utilice en su lugar un archivo "mymixins.import.less" y @importelo explícitamente, p. Ej. '@import ../ relative/path/mymixins.import.less'. –

Desde el Meteor Docs:

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

Fuente

2013-02-15 03:41:55 klamping

Aunque parece que no puedo hacerlo funcionar ... publiqué demasiado pronto ... – klamping

Parece ser un error conocido que se solucionará pronto https://github.com/meteor/meteor/issues/203 – klamping

Esto funciona ahora! Debería ser la respuesta correcta. –

Meteor cómo usar múltiples archivos .less

Respuesta

Cuestiones relacionadas