importer le fichier .css dans un fichier .less

Pouvez-vous importer des fichiers .css dans des fichiers .less …?

Je connais bien moins et je l’utilise pour tout mon développement. J’utilise régulièrement une structure comme suit:

@import "normalize"; //styles here @import "mixins"; @import "media-queries"; @import "print"; 

Toutes les importations sont d’autres fichiers .less et tous fonctionnent comme il se doit.

Mon problème actuel est le suivant: je veux importer un fichier .css dans .less qui référence les styles utilisés dans le fichier .css comme suit:

 @import "../style.css"; .small { font-size:60%; .type; } // other styles here 

Le fichier .type contient une classe appelée .type mais lorsque j’essaie de comstackr le fichier .less, j’obtiens l’erreur NameError: .type is undefined

Le fichier .less n’importera-t-il pas les fichiers .css, seuls les autres fichiers .less …? Ou est-ce que je le référence mal …?!

Vous pouvez forcer un fichier à être interprété comme un type particulier en spécifiant une option, par exemple:

 @import (css) "lib"; 

va sortir

 @import "lib"; 

et

 @import (less) "lib.css"; 

importera le fichier lib.css et le traitera comme moins. Si vous spécifiez qu’un fichier est inférieur et n’incluez pas d’extension, aucun ne sera ajouté.

Si vous souhaitez que votre CSS soit copié dans la sortie sans être traité, vous pouvez utiliser la directive (inline) . par exemple,

 @import (inline) '../timepicker/jquery.ui.timepicker.css'; 

Modifiez l’extension de fichier de votre fichier css à .less . Vous n’avez pas besoin d’écrire rien de moins; tout le CSS est valide MOINS (à l’exception des éléments MS que vous devez échapper, mais c’est un autre problème.)

La réponse de Fractalf est corrigée dans la version 1.4.0

J’ai dû utiliser ce qui suit avec la version 1.7.4

 @import (less) "foo.css" 

Je sais que la réponse acceptée est @import (css) "foo.css" mais cela n’a pas fonctionné. Si vous voulez réutiliser votre classe css dans votre nouveau fichier moins, vous devez utiliser (less) et non (css) .

Vérifiez la documentation .

Du site web LESS :

Si vous souhaitez importer un fichier CSS et que vous ne voulez pas que LESS le traite, utilisez simplement l’extension .css:

@import “lib.css”; La directive sera simplement laissée telle quelle et finira dans la sortie CSS.

Comme le souligne jitbit dans les commentaires ci-dessous, ceci n’est vraiment utile qu’à des fins de développement, car vous ne voudriez pas avoir besoin d’ @import consommations de bande passante.

Essaye ça :

 @import "lib.css"; 

De la documentation officielle:

Vous pouvez importer des fichiers css et moins de fichiers. Seules les instructions d’importation de fichiers sont traitées, les instructions d’importation de fichiers css sont conservées telles quelles. Si vous souhaitez importer un fichier CSS et que vous ne voulez pas que LESS le traite, utilisez simplement l’extension .css:


Source: http://lesscss.org/

Si vous voulez simplement importer un fichier CSS en tant que référence (par exemple pour utiliser les classes dans Mixins) mais ne pas inclure tout le fichier CSS dans le résultat, vous pouvez utiliser @import (less,reference) "reference.css"; :

mon.less

  @import (less,reference) "reference.css"; .my-class{ background-color:black; .reference-class; color:blue; } 

référence.css

 .reference-class{ border: 1px solid red; } 

* Résultat (my.css) avec lessc my.less out/my.css *

 .my-class { background-color: black; border: 1px solid red; color: blue; } 

J’utilise lessc 2.5.3

Si vous voulez importer un fichier css qui devrait être utilisé comme moins, utilisez cette ligne:

 .ie { @import (less) 'ie.css'; } 

depuis 1.5.0, vous pouvez utiliser le mot-clé ‘inline’.

Exemple: @import (inline) “not-less-compatible.css”;

Vous utiliserez ceci lorsqu’un fichier CSS peut ne pas être moins compatible; En effet, bien que Less supporte la plupart des standards connus CSS, il ne supporte pas les commentaires à certains endroits et ne supporte pas tous les hacks CSS connus sans modifier le CSS. Vous pouvez donc l’utiliser pour inclure le fichier dans la sortie afin que tous les CSS soient dans un seul fichier.

(source: http://lesscss.org/features/#import-directives-feature )