web-dev-qa-db-fra.com

importer un fichier .css dans un fichier .less

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

Je connais assez bien less 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 veux 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 .type mais lorsque j'essaie de compiler le fichier .less, l'erreur NameError: .type is undefined

Le fichier .less n'importera-t-il pas des fichiers .css, mais uniquement d'autres fichiers .less ...? Ou est-ce que je me trompe de référence ...?!

cssimportless
213
Mr Jonny Wood

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

304
Fractalf

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

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

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

Per réponse de Fractalf ceci est corrigé dans v1.4.0

28
Mathletics

Je devais 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).

Vérifiez le documentation .

28
Gudradain

Depuis le site Web LESS :

Si vous souhaitez importer un fichier CSS et que vous ne voulez pas que Less soit traité, utilisez simplement l’extension .css:

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

Comme Jitbit le souligne dans les commentaires ci-dessous, cela n’est utile qu’à des fins de développement, car vous ne voudriez pas que des @import inutiles consomment une précieuse bande passante.

8
Quantastical

Essayez ceci: 

@import "lib.css";

Extrait de la documentation officielle:

Vous pouvez importer des fichiers css et moins. Seules 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 que vous ne voulez pas que Less soit traité, utilisez simplement l’extension .css:

Source: http://lesscss.org/

7
Dr.Kameleon

Si vous souhaitez simplement importer un fichier CSS en tant que référence (par exemple, pour utiliser les classes de Mixins) mais que non inclure le fichier CSS complet 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

6
hinneLinks

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

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

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

Exemple: @import (inline) "pas-moins-compatible.css";

Vous l'utiliserez lorsqu'un fichier CSS risque de ne pas être moins compatible; En effet, bien que Less prenne 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 piratages CSS connus sans modification du code CSS. Vous pouvez donc l'utiliser pour inclure le fichier dans la sortie, de sorte que tous les CSS soient dans un seul fichier.

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

3
Pieter-Jan