import .css-bestand in .less-bestand

Kun je .css-bestanden importeren in .less-bestanden…?

Ik ben redelijk bekend met minder en gebruik het voor al mijn ontwikkeling. Ik gebruik regelmatig een structuur als volgt:

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

Alle importen zijn andere .less bestanden en werken allemaal zoals het hoort.

Mijn huidige probleem is dit:
Ik wil een .css-bestand in .less importeren dat als volgt verwijst naar stijlen die in het .css-bestand worden gebruikt:

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

Het .css-bestand bevat een klasse met de naam .type, maar wanneer ik het .less-bestand probeer te compileren, krijg ik de foutmelding NameError: .type is undefined

Importeert het .less-bestand geen .css-bestanden, alleen andere .less-bestanden…? Of noem ik het verkeerd…?!

Antwoord 1, autoriteit 100%

Je kunt een bestand dwingen om als een bepaald type te worden geïnterpreteerd door een optie op te geven, bijvoorbeeld:

@import (css) "lib";

zal uitvoeren

@import "lib";

en

@import (less) "lib.css";

importeert het bestand lib.cssen behandelt het als minder. Als u opgeeft dat een bestand kleiner is en geen extensie bevat, wordt er geen toegevoegd.

Antwoord 2, autoriteit 78%

Als u wilt dat uw CSS naar de uitvoer wordt gekopieerd zonder te worden verwerkt, kunt u de (inline)richtlijn. bijv.,

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

Antwoord 3, autoriteit 9%

Ik moest het volgende gebruiken met versie 1.7.4

@import (less) "foo.css"

Ik weet dat het geaccepteerde antwoord @import (css) "foo.css"is, maar het werkte niet. Als je je css-klasse opnieuw wilt gebruiken in je nieuwe less-bestand, moet je (less)gebruiken en niet (css).

Bekijk de documentatie.

Antwoord 4, autoriteit 9%

Verander de bestandsextensie van je css-bestand in .less. U hoeft er geen MINDER in te schrijven; alle CSS is MINDER geldig (behalve de MS-dingen waaraan je moet ontsnappen, maar dat is een ander probleem.)

Volgens Fractalf’s antwoordis dit opgelost in v1.4.0

Antwoord 5, autoriteit 2%

Van de LESS-website:

Als u een CSS-bestand wilt importeren en niet wilt dat LESS het verwerkt,
gebruik gewoon de .css-extensie:

@import “lib.css”; De richtlijn blijft gewoon zoals hij is en eindigt
in de CSS-uitvoer.

Zoals Jitbit aangeeft in de opmerkingen hieronder, is dit eigenlijk alleen nuttig voor ontwikkelingsdoeleinden, omdat je niet wilt dat onnodige @imports kostbare bandbreedte verbruiken.

Antwoord 6, autoriteit 2%

Probeer dit:

@import "lib.css";

Uit de officiële documentatie:

Je kunt zowel css als minder bestanden importeren. Alleen minder bestanden importeren
statements worden verwerkt, CSS-file import statements worden bewaard zoals ze zijn
zijn. Als u een CSS-bestand wilt importeren en niet wilt dat LESS het verwerkt
het, gebruik gewoon de .css-extensie:

Bron:http://lesscss.org/

Antwoord 7, autoriteit 2%

Als je alleen een CSS-bestand als referentie wilt importeren (bijvoorbeeld om de klassen in Mixins te gebruiken) maar niethet hele CSS-bestand in het resultaat wilt opnemen, kun je @import (less,reference) "reference.css";:

mijn.minder

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

referentie.css

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

*Resultaat (my.css) met lessc my.less out/my.css*

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

Ik gebruik lessc 2.5.3

Antwoord 8

Als je een css-bestand wilt importeren dat als minder moet worden beschouwd, gebruik dan deze regel:

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

Antwoord 9

sinds 1.5.0 kunt u het trefwoord ‘inline’ gebruiken.

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

U gebruikt dit wanneer een CSS-bestand mogelijk niet minder compatibel is; dit komt omdat, hoewel Less de meeste bekende CSS-standaarden ondersteunt, het op sommige plaatsen geen opmerkingen ondersteunt en niet alle bekende CSS-hacks ondersteunt zonder de CSS te wijzigen.
U kunt dit dus gebruiken om het bestand in de uitvoer op te nemen, zodat alle CSS in één bestand staat.

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