importer un fichier .css dans un fichier .less

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

Je connais bien moins et 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 fonctionnent comme il se doit.

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

@import "../style.css";

.small {
    font-size:60%;
    .type;
}
// other styles here

Le fichier .css contient une classe appelée .typemais lorsque j'essaie de compiler le fichier .less, j'obtiens l'erreurNameError: .type is undefined

Le fichier .less n'importera-t-il pas les fichiers .css, seulement d'autres .less ...? Ou suis-je mal référencé ...?!

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

@import (css) "lib";

affichera

@import "lib";

et

@import (less) "lib.css";

va importer le lib.cssfichier et le traiter 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 (inline)directive . par exemple,

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

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 souhaitez réutiliser votre classe css dans votre nouveau fichier less, vous devez utiliser (less)et non (css).

Consultez la documentation .

Modifiez l'extension de votre fichier css en .less. Vous n'avez pas besoin d'y écrire MOINS; tous les CSS sont valides MOINS (à l'exception des éléments MS auxquels vous devez vous échapper, mais c'est un autre problème.)

Selon la réponse de Fractalf, cela est corrigé dans la v1.4.0

Depuis le site Web de LESS :

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

@import "lib.css"; La directive restera telle quelle et se retrouvera dans la sortie CSS.

Comme jitbit le fait remarquer dans les commentaires ci-dessous, cela n'est vraiment utile qu'à des fins de développement, car vous ne voudriez pas que la @importconsommation de bande passante précieuse soit inutile .

Essaye ça :

@import "lib.css";

De la documentation officielle:

Vous pouvez importer des fichiers CSS et moins. Seulement moins d'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 ne voulez pas que MOINS le traite, utilisez simplement l'extension .css:

Source: http://lesscss.org/

Si vous voulez juste importer un fichier CSS comme 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";:

my.less

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

reference.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 souhaitez importer un fichier css qui devrait être traité comme moins, utilisez cette ligne:

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

depuis la version 1.5.0, vous pouvez utiliser le mot-clé 'inline'.

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

Vous l'utiliserez lorsqu'un fichier CSS peut ne pas être moins compatible; En effet, même si Less prend en charge la plupart des normes CSS connues, il ne prend pas en charge les commentaires à certains endroits et ne prend pas en charge 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 )