importare il file .css nel file .less

Puoi importare file .css in file .less ...?

Conosco meno con meno e lo uso per tutto il mio sviluppo. Uso regolarmente una struttura come segue:

@import "normalize";

//styles here

@import "mixins";
@import "media-queries";
@import "print";

Tutte le importazioni sono altri file .less e tutto funziona come dovrebbe.

Il mio problema attuale è questo: voglio importare un file .css in .less che fa riferimento agli stili utilizzati nel file .css come segue:

@import "../style.css";

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

Il file .css contiene una classe chiamata .typema quando provo a compilare il file .less ottengo l'erroreNameError: .type is undefined

Il file .less non importerà i file .css, solo altri file .less ...? O sto facendo riferimento ad esso sbagliato ...?!

È possibile forzare l'interpretazione di un file come un tipo particolare specificando un'opzione, ad esempio:

@import (css) "lib";

uscirà

@import "lib";

e

@import (less) "lib.css";

importerà il lib.cssfile e lo tratterà come meno. Se si specifica un file è inferiore e non si include un'estensione, nessuno verrà aggiunto.

Se vuoi che il tuo CSS venga copiato nell'output senza essere elaborato, puoi usare la (inline)direttiva . per esempio,

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

Ho dovuto usare quanto segue con la versione 1.7.4

@import (less) "foo.css"

So che la risposta accettata è @import (css) "foo.css"ma non ha funzionato. Se vuoi riutilizzare la tua classe css nel tuo nuovo file less, devi usare (less)e non (css).

Controlla la documentazione .

Modifica l'estensione del file css in .less. Non è necessario scrivere MENO in esso; tutto il CSS è valido MENO (ad eccezione delle cose MS che devi scappare, ma questo è un altro problema.)

Per la risposta di Fractalf questo è stato risolto nella v1.4.0

Dal sito MENO :

Se vuoi importare un file CSS e non vuoi che MENO lo elabori, usa l'estensione .css:

@import "lib.css"; La direttiva sarà lasciata così com'è e finirà nell'output CSS.

Come sottolinea jitbit nei commenti qui sotto, questo è davvero utile solo per scopi di sviluppo, in quanto non si vorrebbe avere una @importlarghezza di banda preziosa che consuma inutilmente .

Prova questo :

@import "lib.css";

Dalla documentazione ufficiale:

Puoi importare sia css che meno file. Vengono elaborate solo meno istruzioni di importazione dei file, le dichiarazioni di importazione dei file css vengono mantenute così come sono. Se vuoi importare un file CSS e non vuoi che MENO lo elabori, usa l'estensione .css:

Fonte: http://lesscss.org/

Se desideri semplicemente importare un file CSS come riferimento (ad esempio per utilizzare le classi in Mixin) ma non includere l'intero file CSS nel risultato, puoi utilizzare @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;
}

* Risultato (my.css) con lessc my.less out/my.css*

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

sto usando lessc 2.5.3

Se vuoi importare un file CSS che dovrebbe essere calpestato meno usa questa linea:

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

dalla 1.5.0 puoi usare la parola chiave "inline".

Esempio: @import (inline) "not-less-compatibile.css";

Lo userete quando un file CSS potrebbe non essere meno compatibile; questo perché, sebbene Less supporti gli standard CSS più noti, non supporta i commenti in alcuni punti e non supporta tutti gli hack CSS conosciuti senza modificare il CSS. Quindi puoi usarlo per includere il file nell'output in modo che tutti i CSS siano in un unico file.

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