web-dev-qa-db-fra.com

Pourquoi ne puis-je pas importer des fichiers .less dans un seul fichier .less?

J'ai cette structure de mes fichiers:

lib/css/... Contient mes styles divisés en fichiers .less uniques pour chaque type de zone.

lib/style.less Est le fichier dans lequel je veux rassembler mes fichiers de sous-style - et le fichier dans lequel je veux être lié au HTML.

Lorsque je tape (dans style.less):

@import url("/css/StyleToImport.less");

ou

@import "/css/StyleToImport.less";

... J'obtiens une erreur de syntaxe.

Est-il vraiment impossible de combiner des fichiers .less en un seul fichier?

Il peut être très pratique d'avoir 1 seul fichier contenant toutes les variables pour les couleurs, les dimensions, etc.

Mais comme c'est le cas maintenant, je dois utiliser des balises <link ...> En HTML pour chaque fichier - ce qui n'est pas si pratique.

P.S. J'ai lu Joindre deux fichiers .less en un seul fichier css

et j'ai lu ceci:

Importation

L'importation fonctionne à peu près comme prévu. Vous pouvez importer un fichier .less, et toutes les variables qu'il contient seront disponibles. Si le fichier est un .less, l'extension est facultative:

@import "bibliothèque";

@import "typo.css";

cssless
18
KristianB

Je viens d'essayer ceci sur mon environnement local, en mettant vars dans vars.less et mixins dans conf.less. La structure de fichiers est similaire à la vôtre, avec le fichier de base .less un niveau en dessous du dossier contenant tous les 'includes'.

J'ai donc eu le dossier css qui contenait mon main.less fichier, puis css/less/vars.less | conf.less

Pour importer les deux:

@import "less/vars.less";
@import "less/conf.less";

Ma seule réponse est de supprimer le premier / dans votre @import déclaration. J'ai rencontré des problèmes similaires en essayant d'importer une police Google dans mon .less fichier.

Ça vaut le coup au moins, car utiliser la même structure que la mienne fonctionne.

29
Daniel

J'ai eu un problème similaire où les importations semblaient échouer silencieusement. Il s'est avéré que mon éditeur avait enregistré les fichiers @ import-ed au format UTF-8 avec BOM, comme décrit dans cette question .

Pour une raison quelconque, le compilateur LESS s'étouffe silencieusement sur les fichiers @ import-ed qui ont une nomenclature, même s'il barfs une erreur si votre fichier racine a une bombe.

Essayez de réenregistrer vos fichiers @ import-ed sans nomenclature, et cela pourrait fonctionner.

5
Chris Jaynes

Lorsque vous créez un lien vers le répertoire /, il regarde de la racine vers le bas et dans ce cas, il ne le trouvera pas. Donc @Daniel a raison en suggérant de supprimer la barre oblique.

Vous devez le lier comme tel:

@import url("css/StyleToImport.less");

Ceci, parce que votre point de départ se trouve dans le répertoire css lui-même, puis pointez vers le bas dans ce répertoire css /, puis pointez sur le fichier lui-même.

Si vous deviez d'abord remonter un répertoire, puis encore et encore, vous feriez

../directory/file.less
1
Marlyse Comte

Je ne sais pas exactement quel est le problème sans l'erreur.

Je suggérerais d'utiliser lessapp, http://incident57.com/less/ , qui, selon moi, fonctionne très bien et est un peu plus facile à utiliser. Méfiez-vous également d'essayer d'importer des fichiers vierges car cela peut générer une erreur.

J'ai téléchargé du code de base que j'utilise pour structurer mes fichiers en fonction du projet - vous pouvez les obtenir à https://github.com/danethurber/seamLESS . Cela peut peut-être aider et si vous ou quelqu'un veut contribuer, je serais heureux de l'aide :)

1
dane