@marceloverdijk Tengo curiosidad por saber qué piensas sobre el # 331 y cómo se deben ajustar las rutas al importar hojas de estilo.

La regla es simple: solo importe archivos que terminen en .less o no tengan extensión, el resto se deja en manos del navegador. Entonces <strong i="6">@import</strong> "foo.css" se deja intacto, <strong i="8">@import</strong> "foo" y <strong i="10">@import</strong> "foo.less" se analizan y los archivos se importan.

OK, la regla es clara. Gracias.

Pero, ¿tiene alguna idea de por qué la importación de fuentes de Google se importa realmente?
La única diferencia es que estoy usando Env.js y Rhino en lugar de un navegador real.

¿Es la menos lógica tal vez usar algo para determinar si debe importar o no lo que Env.js no entiende (o incorrectamente)?

Se agradece cualquier ayuda.

Tenga en cuenta que estoy usando esto para compilar MENOS:

var result; var p = nuevo less.Parser (); p.parse (entrada, función (e, árbol) {resultado = árbol.toCSS ();});

1 pregunta sobre la regla. ¿Importan las citas?

Noté esto en la fuente menos de import.js:

    if (path instanceof tree.Quoted) {
        this.path = /\.(le?|c)ss$/.test(path.content) ? path.content : path.content + '.less';
    } else {
        this.path = path.value.content || path.value;
    }

La solución alternativa que he usado es agregar &.css a la URL de la fuente para engañar al analizador LESS para que lo maneje como una importación CSS normal. Al igual que:

<strong i="7">@import</strong> url(http://fonts.googleapis.com/css?family=Open+Sans&.css);

Por cierto, me parece muy desafortunado que los diseñadores originales de LESS no usaran una directiva @include separada, en lugar de reutilizar la vieja y pobre @import ...

Creo que debería funcionar sin eso como lo sugiere la prueba https://github.com/cloudhead/less.js/blob/master/test/less/import.less

que contiene

<strong i="8">@import</strong> url("import/import-test-a.less");
//<strong i="9">@import</strong> url("import/import-test-a.less");
<strong i="10">@import</strong> url(http://fonts.googleapis.com/css?family=Open+Sans);

#import-test {
  .mixin;
  width: 10px;
  height: <strong i="11">@a</strong> + 10%;
}

y espera

<strong i="15">@import</strong> "import-test-d.css";

<strong i="16">@import</strong> url(http://fonts.googleapis.com/css?family=Open+Sans);
#import {
  color: red;
}
.mixin {
  height: 10px;
  color: red;
}
#import-test {
  height: 10px;
  color: red;
  width: 10px;
  height: 30%;
}

que todavía contiene la importación de Google Fonts.
No los he probado yo mismo, pero supongo que pasa.

PD: Esta importación de Google Fonts es la única parte que no pasa en mi biblioteca lesscss4j de código abierto.
Todas las demás pruebas de compatibilidad están pasando ahora.

Así que estoy realmente ansioso por resolver este último problema antes de lanzarlo. Espero que alguien pueda ayudar.

Gracias maranomynet por la excelente solución para Google Web Fonts en LESS (estaba teniendo problemas para usar @import en LESS versión 1.1.3). Estoy de acuerdo en que LESS manejó esta parte de la sintaxis de una manera desafortunada.

Incluso me confundí más ahora.

Creé un proyecto web simple y agregué el siguiente código a la sección principal:

<link rel="stylesheet/less" type="text/css" href="/less/google.less">
<link rel="stylesheet/less" type="text/css" href="/bootstrap/bootstrap.less">
<script src="/js/less-1.1.4.js" type="text/javascript"></script>

La compilación de Twitter Bootstrap funciona, pero google.less no.
Este google.less solo contiene la siguiente línea copiada de la prueba de compatibilidad MENOS import.less

<strong i="11">@import</strong> url(http://fonts.googleapis.com/css?family=Open+Sans);

El error que recibo en el navegador es:

No se pudo cargar http: // localhost : 8888 / less / http://fonts.googleapis.com/css?family=Open+Sans (404)
http: // localhost : 8888 / less / google.less

Ahora realmente empiezo a preguntarme sobre la prueba de compatibilidad import.less ...

agregar & .css antes de cerrar la importación de URL

de
@import url (http://fonts.googleapis.com/css?family=Open+Sans);

a
@import url (http://fonts.googleapis.com/css?family=Open+Sans&css);

Tuve un problema similar, así que en caso de que esto ayude a alguien: estaba intentando importar varias fuentes de Google separadas por '|':
@import url (http://fonts.googleapis.com/css?family=Inconsolata|Cantarell|Architects|Daughter&.css);
lo que daría un error "falta de cierre) para url ()"

El error se resolvió envolviendo la URL entre comillas (nota: el & .css aún debe estar al final; de lo contrario, se produjo el error de importación 404). Todas las fuentes también se cargan correctamente:
@import url ("http://fonts.googleapis.com/css?family=Ubuntu+Mono|Cantarell|Architects|Daughter&.css");

buenos consejos enoex: D gracias !!!!

Err, es difícil ver por qué se ha resuelto este problema. Los usuarios han encontrado un truco increíblemente dudoso a su alrededor, uno que podría romperse si Google decide darle un significado a & .css; esto necesita ser arreglado en lessc. Debería existir algún método para forzar que una @import se tome literalmente.

Estoy de acuerdo. ¿alguna sugerencia?

<strong i="6">@import</strong> css url(...);

es una posibilidad. También le permitiría forzar la importación de Less con una extensión .css.

Esa sintaxis se ve bien (no soy yo quien escribe el analizador, así que no sé qué tan bien encaja).

Mi única preocupación son otros compiladores less . El código con el que tuve problemas funcionó bien para los desarrolladores que lo escribieron, probablemente porque su compilador menos ni siquiera lo hace en tiempo de compilación @import . Entonces, incluso si esto se solucionó en lessc , probablemente seguiría usando el truco "& .css". Sin embargo, no hay nada que puedas hacer al respecto.

¿Alguien encontró una solución?

Descubrí que agregar "& .css" y envolver la URL entre comillas solo resuelve los problemas de compilación: las fuentes que estoy especificando aún no se están procesando ...

reabierto, ya que parece que todavía es un problema, ¿verdad?

una solución simple sería no agregar nada a la URL si contiene parámetros (por ejemplo,? family = x)

@ntoft Ya no puedo reproducir el error .. usando lessc .. ¿cuál es exactamente el problema restante?

Gracias por hacer un seguimiento.

Estoy usando el enfoque "append & .css" y está funcionando ahora (error de parte del usuario: - /) Simplemente tenía curiosidad por saber si había un método mejor. Sin embargo, parece estar funcionando, así que no dude en cerrarlo.

Gracias.

Sería bueno si funcionara sin el método append .css ... ¿tiene un ejemplo de eso?

Creo que entendí mal ... el problema es que el css se está importando cuando no quieres que se importe.

Tal vez en 1.4.0 @import debería dejarse solo y @include siempre debería incluirse

mover la discusión a un solo tema # 1185

Solo necesitaba escapar caracteres como este, @import url (https \: \ / \ / fonts.googleapis.com \ / css? Family = Orbitron & .css);

@ jas-naz La forma adecuada y más legible es:

<strong i="6">@import</strong> (css) url(https://fonts.googleapis.com/css?family=Orbitron);

Para obtener más información, consulte http://lesscss.org/features/#import -atrules-feature-import-options.

Hola, otro truco para lograr esto es agregar "#css" al final de la URL, así:

<strong i="6">@import</strong> url('https://fonts.googleapis.com/css?family=Paytone+One#css');

@TyrionGraphiste

Mala idea. En versiones recientes, Less realmente procesará este archivo (en lugar de dejar la importación como está).
Por eso es obligatorio (css) delante de él. (En versiones anteriores, era simplemente un comportamiento incorrecto en el que el compilador decidía por "alguna" cadena css en la URL en lugar de la extensión adecuada que faltaba en este caso particular).