importer un fichier .css dans un fichier .less

228

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

M. Jonny Wood
la source
5
MOINS revient à CSS, vous devriez donc pouvoir simplement renommer style.css en style.less, puis l'importer comme d'habitude ... à moins bien sûr que renommer style.css ne soit pas une option
jackwanders
3
oui, malheureusement, renommer le fichier .css n'est pas vraiment possible.
M. Jonny Wood
1
J'ai le même problème. Veuillez prendre en charge le problème github.com/cloudhead/less.js/issues/303
Yaroslav
5
si vous n'avez pas besoin de référencer le .css en externe, et en même temps que vous ne devez pas modifier (renommer) le fichier .css, vous pouvez créer un lien symbolique vers celui-ci qui a l' .lessextension. Référencez-le ensuite sous forme de .lessfichier. Étant un lien symbolique, il soulage la charge de les synchroniser car vos modifications .css affectent immédiatement le fichier .less en cours d'importation. L'inconvénient est que vous devez recompiler le CSS final après les modifications ultérieures. Pour plus d'informations sur la création de liens symboliques dans Windows, tapez MKLINK /?dans une fenêtre de commande
Ivaylo Slavov
@jackwanders, le changement de nom n'est pas nécessaire, car MOINS revient à CSS (comme vous le signalez correctement). Vous pouvez importer le .cssfichier à l'aide de la (less)directive inline et profiter du fait que la .csssyntaxe est une .lesssyntaxe valide
ira

Réponses:

316

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

Fractalf
la source
1
Ceci est la bonne réponse. Le troisième importera + compilera le code CSS comme moins de code et ne laissera pas la directive intacte.
CMCDragonkai
1
Je pense que @import (include) "lib.css" devrait être utilisé. Je n'aime pas la sémantique de mentir au compilateur. Certes, quand vous savez qu'il n'y a pas moins de code dans le fichier.
16
Cela créera une demande http supplémentaire pour foo.css, donc la (inline)directive (voir stackoverflow.com/a/22594082/160968 ) est maintenant préférable
Urs
1
(inline)ne fonctionnera pas car il ne transforme pas les références externes en polices ou autres @importfichiers css ed. Vous venez de vous retrouver avec un fichier css plus volumineux qui provoque beaucoup de requêtes HTTP 404 ....
user3338098
Annulation de la dernière modification car elle était tout simplement incorrecte et ne répondait pas au Q.
seven-phases-max
246

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';
mpen
la source
7
Parfait. Cela fonctionne bien lorsque vous souhaitez concaténer certains fichiers CSS (par exemple dans un ie7.less), mais pas nécessairement les traiter (par exemple, bootstrap-ie7 utilise des expressions que LESS ne gère pas bien).
Joe
4
Très utile. @import (css) "styles.css";n'a pas fonctionné pour moi.
ivkremer
10
Ils traitent tous les deux des cas d'utilisation différents. Avec (css), la @importdirective restera telle quelle et, par conséquent, le fichier CSS sera chargé par le navigateur lors de l'exécution; avec (inline), le contenu du fichier CSS est réellement importé dans la feuille de style compilée, ce que vous voulez si ce fichier est hors de votre racine web par exemple. Notez que le comportement par défaut lors de l' @importingénierie d'un .cssfichier est le même qu'avec le (css)drapeau - lisez la documentation pour plus d'informations :)
neemzy
donc cela ne fonctionnera évidemment pas si votre fichier css a des @importdirectives car cela nécessiterait un "traitement".
user3338098
Est-ce que «en ligne» signifie que toutes ses importations seront également en ligne? Existe-t-il un moyen de récursivement en ligne?
réverbère
29

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 .

Gudradain
la source
2
La réponse acceptée avait initialement l'option correcte (oui, (less)c'est la seule option si vous voulez réutiliser certains styles d'un fichier css) mais pour une raison quelconque, @Fractalf a supprimé la bonne partie avec sa dernière édition.
sept phases-max
1
Vous pouvez combiner "référence" et "moins":@import (less, reference) "foo.css"
Skarllot
28

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

Mathletics
la source
4
Techniquement, ce n'est pas l'importation d'un fichier CSS.
nilskp
@nilskp vous avez raison; mais si vous voulez utiliser les classes dans un autre fichier, vous avez besoin d'un fichier MOINS, pas CSS.
Mathletics
1
@nilskp dites-vous que changer l'extension est trop demander pour que le fichier soit analysé comme MOINS?
Mathletics
23
Oui, Bien sur que c'est ça. Essayez de penser en dehors d'un petit projet d'accueil où vous possédez tous les fichiers. Pensez à de plus grands projets multi-personnes, où tout le monde n'utilise PAS MOINS. Il existe des tonnes de cas d'utilisation où la modification des noms de fichiers n'est pas possible.
nilskp
1
Vous devriez vous soucier si votre css contient quelque chose comme: calc (100% - 45px); et vous le voulez dans le navigateur. Si moins traite le fichier comme moins, le résultat final sera: calc (55%); car moins le calc.
Christof Aenderl
8

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 .

webdevkit
la source
14
Cela N'IMPORTERA PAS le fichier, il laissera la directive @import intacte. Cela fonctionnera toujours, mais vous devez éviter l'importation css - regardez ceci developers.google.com/speed/docs/best-practices/…
Alex
5
Merci pour l'info @jitbit. Personnellement, je trouve plus facile à utiliser @importpendant le développement, puis combine et réduit les fichiers importés dans une seule feuille de style lors du passage en production.
webdevkit
1
Si vous lisez attentivement la question (et pas seulement la ligne d'en-tête), vous verrez que l'OP souhaite référencer une classe dans le fichier css en tant que mixage, ce qui n'est pas possible s'il est simplement analysé comme une simple importation css.
admiration
7

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/

Dr.Kameleon
la source
2
Si vous lisez attentivement la question (et pas seulement la ligne d'en-tête), vous verrez que l'OP souhaite référencer une classe dans le fichier css en tant que mixage, ce qui n'est pas possible s'il est simplement analysé comme une simple importation css.
admiration
6

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

hinneLinks
la source
C'était ce dont j'avais besoin. Cependant, je devais utiliser la syntaxe étendre: &:extend(.reference-class all);. Le référencement direct de la classe a entraîné une erreur de compilation.
Jens Neubauer
4

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

.ie {
  @import (less) 'ie.css';
}
Charles
la source
3

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 )

Pieter-Jan
la source