@marceloverdijk estou curioso para saber o que você pensa sobre o # 331 e como os caminhos devem ser ajustados ao importar folhas de estilo.

A regra é simples: importe apenas arquivos que terminem com .less ou não tenham extensão, o resto fica para o navegador. Portanto, <strong i="6">@import</strong> "foo.css" é deixado intocado, <strong i="8">@import</strong> "foo" e <strong i="10">@import</strong> "foo.less" são analisados ​​e os arquivos são importados.

OK, a regra é clara. Obrigado.

Mas você tem alguma ideia de por que a importação de fontes do Google é realmente importada então?
A única diferença é que estou usando Env.js e Rhino em vez de um navegador real.

O menos lógico está usando algo para determinar se deve importar ou não que não é compreendido (ou incorretamente) por Env.js?

Qualquer ajuda apreciada.

Observe que estou usando isso para compilar o MENOS:

var result; var p = novo menos.Parser (); p.parse (entrada, função (e, árvore) {resultado = árvore.toCSS ();});

1 pergunta sobre a regra. As citações importam?

Percebi isso na fonte import.js less:

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

A solução alternativa que usei é anexar &.css ao URL da fonte para enganar o analisador LESS para tratá-la como uma importação CSS normal. Igual a:

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

A propósito, acho muito lamentável que os designers originais do LESS não tenham usado uma diretiva @include separada, em vez de reutilizar o pobre e velho @import ...

Acho que deveria funcionar sem isso, conforme sugerido pelo teste https://github.com/cloudhead/less.js/blob/master/test/less/import.less

que contém

<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%;
}

e 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 ainda contém a importação do Google Fonts.
Eu mesmo não testei, mas presumo que passe.

PS: Esta importação do Google Fonts é a única parte que não está passando na minha biblioteca lesscss4j de código aberto.
Todos os outros testes de compatibilidade estão passando agora.

Portanto, estou realmente ansioso para resolver esse último problema antes de lançá-lo. Espero que alguém possa ajudar.

Obrigado, maranomynet, pela ótima solução alternativa para o Google Web Fonts no LESS (estava tendo problemas para usar o @import no LESS versão 1.1.3). Eu concordo que o LESS lidou com essa parte da sintaxe de uma forma infeliz.

Fiquei ainda mais confuso agora.

Eu criei um projeto web simples e adicionei o código abaixo à seção head:

<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>

A compilação do Twitter Bootstrap está funcionando, mas o google.less não.
Este google.less contém apenas a linha abaixo copiada do teste de compatibilidade LESS import.less

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

O erro que recebo no navegador é:

Não foi possível carregar http: // localhost : 8888 / less / http://fonts.googleapis.com/css?family=Open+Sans (404)
http: // localhost : 8888 / less / google.less

Agora eu realmente começo a me perguntar sobre o teste de compatibilidade import.less ....

adicione & .css antes de fechar a importação de url

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

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

Eu tive um problema semelhante, então caso isso ajude alguém: Eu estava tentando importar várias fontes do Google separadas por '|':
@import url (http://fonts.googleapis.com/css?family=Inconsolata|Cantarell|Architects|Filha&.css);
o que geraria um erro "fechamento ausente) para url ()"

O erro foi resolvido colocando o URL entre aspas (nota: o & .css ainda deve estar no final, caso contrário, ocorreu o erro de importação 404). Todas as fontes também foram carregadas com sucesso:
@import url ("http://fonts.googleapis.com/css?family=Ubuntu+Mono|Cantarell|Architects|Daughter&.css");

boas dicas enoex: D agradeço !!!!

Err, é difícil ver por que esse problema foi encerrado. Os usuários encontraram um hack incrivelmente desonesto em torno dele, que pode falhar se o Google decidir atribuir um significado ao & .css; isso precisa ser consertado em lessc. Deve haver algum método para forçar um @import a ser entendido literalmente.

Eu concordo. alguma sugestão?

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

é uma possibilidade. Também permitiria que você force a importação de Less com uma extensão .css.

Essa sintaxe parece boa (não sou eu que escrevo o analisador, então não sei se ele se encaixa bem).

Minha única preocupação são os outros less compiladores. O código com o qual tive problemas funcionou bem para os desenvolvedores que o escreveram, provavelmente porque seu compilador menor nem mesmo faz o tempo de compilação @import . Portanto, mesmo que isso fosse corrigido em lessc , provavelmente continuaria usando o hack "& .css". Não há nada que você possa fazer sobre isso.

Alguém encontrou uma solução?

Descobri que acrescentar "& .css" e colocar o URL entre aspas só resolve os problemas de compilação - as fontes que estou especificando ainda não estão sendo renderizadas ....

reaberto, pois parece que ainda é um problema - certo?

uma solução simples seria não anexar nada ao url se ele contiver parâmetros (por exemplo? família = x)

@ntoft Não consigo mais reproduzir o erro .. usando lessc .. Qual é exatamente o problema que resta?

Obrigado por acompanhar.

Estou usando a abordagem "append & .css" e está funcionando agora (parte do erro do usuário: - /) Estava simplesmente curioso para saber se havia um método melhor. No entanto, parece estar funcionando, então fique à vontade para fechá-lo.

obrigado.

seria bom se funcionasse sem a abordagem append .css ... então você tem um exemplo disso?

Acho que entendi mal ... o problema é que o css está sendo importado quando você não quer que ele seja importado.

Talvez em 1.4.0 @import deva ser deixado sozinho e @include deva sempre ser incluído

movendo a discussão para um único problema # 1185

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

@ jas-naz A maneira adequada e mais legível é:

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

Para obter mais informações, consulte http://lesscss.org/features/#import -atrules-feature-import-options.

Olá, outro hack para conseguir isso é adicionar "#css" no final do url, assim:

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

@TyrionGraphiste

Péssima ideia. Em versões recentes, Less irá realmente processar este arquivo (em vez de deixar a importação como está).
É por isso que (css) na frente dele é obrigatório. (Em versões anteriores, era apenas o comportamento errado em que o compilador decidia por "alguma" css string na url em vez da extensão apropriada ausente neste caso particular).