@marceloverdijk Je serais curieux de savoir ce que vous pensez de # 331 et comment les chemins doivent être ajustés lors de l'importation de feuilles de style.

La règle est simple: n'importez que les fichiers qui se terminent par .less ou n'ont pas d'extension, le reste est laissé au navigateur. Donc <strong i="6">@import</strong> "foo.css" n'est pas touché, <strong i="8">@import</strong> "foo" et <strong i="10">@import</strong> "foo.less" sont analysés et les fichiers sont importés.

OK, la règle est claire. Merci.

Mais avez-vous une idée de la raison pour laquelle l'importation de polices Google est alors importée?
La seule différence est que j'utilise Env.js et Rhino au lieu d'un vrai navigateur.

Est-ce que le moins logique utilise peut-être quelque chose pour déterminer s'il doit importer ou non ce qui n'est pas compris (ou incorrectement) par Env.js?

Toute aide appréciée.

Notez que j'utilise ceci pour compiler le MOINS:

var result; var p = nouveau moins.Parser (); p.parse (entrée, fonction (e, arbre) {résultat = arbre.toCSS ();});

1 question sur la règle. Les citations sont-elles importantes?

J'ai remarqué cela dans le fichier import.js less source:

    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 solution de contournement que j'ai utilisée consiste à ajouter &.css à l'URL de la police pour inciter l'analyseur LESS à le gérer comme une importation CSS normale. Ainsi:

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

BTW, je trouve très malheureux que les concepteurs originaux de LESS n'aient pas utilisé une directive @include distincte, au lieu de réutiliser le pauvre vieux @import ...

Je pense que cela devrait fonctionner sans cela comme suggéré par le test https://github.com/cloudhead/less.js/blob/master/test/less/import.less

qui contient

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

et attend

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

qui contient encore l'importation de Google Fonts.
Je ne les ai pas testés moi-même, mais je suppose que cela passe.

PS: Cette importation Google Fonts est la seule partie qui ne passe pas dans ma bibliothèque lesscss4j open source.
Tous les autres tests de compatibilité réussissent maintenant.

J'ai donc vraiment hâte de résoudre ce dernier problème avant de le publier. J'espère que quelqu'un pourra vous aider.

Merci maranomynet pour l'excellente solution de contournement pour Google Web Fonts dans LESS (j'avais du mal à utiliser @import dans LESS version 1.1.3). Je conviens que LESS a géré cette partie de la syntaxe de manière malheureuse.

Je suis même devenu plus confus maintenant.

J'ai créé un projet Web simple et ajouté le code ci-dessous dans la section principale:

<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 compilation de Twitter Bootstrap fonctionne mais pas le google.less.
Ce google.less ne contient que la ligne ci-dessous copiée à partir du test de compatibilité LESS import.less

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

L'erreur que je reçois dans le navigateur est:

Impossible de charger http: // localhost : 8888 / less / http://fonts.googleapis.com/css?family=Open+Sans (404)
http: // localhost : 8888 / less / google.less

Maintenant, je commence vraiment à m'interroger sur le test de compatibilité import.less ...

ajouter & .css avant de fermer l'importation d'URL

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

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

J'ai eu un problème similaire, donc au cas où cela aiderait quelqu'un: j'essayais d'importer plusieurs polices google séparées par '|':
@import url (http://fonts.googleapis.com/css?family=Inconsolata|Cantarell|Architects|Daughter&.css);
ce qui donnerait une erreur "fermeture manquante) pour url ()"

L'erreur a été résolue en mettant l'URL entre guillemets (note: le & .css doit toujours être à la fin, sinon l'erreur d'importation 404 s'est produite). Toutes les polices sont également chargées avec succès:
@import url ("http://fonts.googleapis.com/css?family=Ubuntu+Mono|Cantarell|Architects|Daughter&.css");

bons conseils enoex: D merci !!!!

Err, il est difficile de voir pourquoi ce problème a été résolu. Les utilisateurs ont trouvé un hack incroyablement douteux autour de lui, qui pourrait casser si Google décide d'attacher un sens à & .css; cela doit être corrigé en lessc. Une méthode devrait exister pour forcer un @import à être pris à la lettre.

Je suis d'accord. Aucune suggestion?

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

est une possibilité. Cela vous permettrait également de forcer l'importation de Less avec une extension .css.

Cette syntaxe a l'air bien (je ne suis pas celui qui écrit l'analyseur, donc je ne sais pas à quel point il s'adapte).

Ma seule préoccupation concerne les autres compilateurs less . Le code avec lequel j'ai eu des problèmes fonctionnait bien pour les développeurs qui l'ont écrit, probablement parce que leur compilateur moins ne fait même pas la compilation @import . Donc, même si cela était corrigé dans lessc , je continuerais probablement à utiliser le hack "& .css". Il n'y a rien que vous puissiez faire à ce sujet.

Quelqu'un a trouvé une solution?

J'ai trouvé que l'ajout de "& .css" et l'encapsulation de l'URL entre guillemets ne résout que les problèmes de compilation - les polices que je spécifie ne sont toujours pas rendues ....

rouvert car il semble que ce soit toujours un problème - non?

une solution simple serait de ne rien ajouter à l'url si elle contient des paramètres (par exemple? family = x)

@ntoft Je ne peux plus reproduire l'erreur .. en utilisant lessc .. quel est exactement le problème restant?

Merci pour le suivi.

J'utilise l'approche "append & .css" et cela fonctionne maintenant (erreur de l'utilisateur partiel: - /) J'étais simplement curieux de savoir s'il y avait une meilleure méthode. Cependant, il semble fonctionner, alors n'hésitez pas à le fermer.

Merci.

ce serait bien si cela fonctionnait sans l'approche append .css .. alors avez-vous un exemple de cela?

Je pense que j'ai mal compris ... le problème est que le css est importé alors que vous ne voulez pas qu'il soit importé.

Peut-être que dans 1.4.0 @import devrait être laissé seul et @include devrait toujours être inclus

déplacer la discussion vers un seul numéro # 1185

Juste nécessaire pour échapper des caractères comme celui-ci, @import url (https \: \ / \ / fonts.googleapis.com \ / css? Family = Orbitron & .css);

@ jas-naz La manière appropriée et plus lisible est:

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

Pour plus d'informations, consultez http://lesscss.org/features/#import -atrules-feature-import-options.

Bonjour, un autre hack pour y parvenir est d'ajouter "#css" à la fin de l'url, comme ceci:

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

@TyrionGraphiste

Mauvaise idée. Dans les versions récentes, Less traitera réellement ce fichier (au lieu de laisser l'importation telle quelle).
C'est pourquoi (css) devant elle est obligatoire. (Dans les versions précédentes, c'était juste le mauvais comportement où le compilateur décidait par "une" chaîne css dans l'url au lieu de l'extension appropriée manquante dans ce cas particulier).