zaimportuj plik .css do pliku .less

Czy możesz importować pliki .css do plików .less ...?

Znam mniej i używam go przez cały mój rozwój. Regularnie używam następującej struktury:

@import "normalize";

//styles here

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

Wszystkie importowane pliki są innymi plikami .less i działają tak, jak powinny.

Mój aktualny problem jest następujący: chcę zaimportować plik .css do .less, który odwołuje się do stylów używanych w pliku .css w następujący sposób:

@import "../style.css";

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

Plik .css zawiera klasę o nazwie, .typeale gdy próbuję skompilować plik .less, pojawia się błądNameError: .type is undefined

Czy plik .less nie importuje plików .css, tylko inne .less ...? A może źle to nazywam ...?!

Możesz wymusić interpretację pliku jako określonego typu, określając opcję, np .:

@import (css) "lib";

wyjdzie

@import "lib";

i

@import (less) "lib.css";

zaimportuje lib.cssplik i potraktuje go jako mniej. Jeśli określisz, że plik jest mniejszy i nie zawiera rozszerzenia, żadne nie zostanie dodane.

Jeśli chcesz, aby Twój CSS został skopiowany do wyjścia bez przetworzenia, możesz skorzystać z (inline)dyrektywy . na przykład,

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

Musiałem użyć następujących w wersji 1.7.4

@import (less) "foo.css"

Wiem, że zaakceptowana odpowiedź brzmi, @import (css) "foo.css"ale nie zadziałała. Jeśli chcesz ponownie wykorzystać klasę css w nowym mniejszym pliku, musisz go użyć, (less)a nie(css) .

Sprawdź dokumentację .

Zmień rozszerzenie pliku css na .less. Nie musisz w nim pisać MNIEJ; cały CSS jest poprawny MNIEJ (z wyjątkiem MS rzeczy, które musisz uciec, ale to inny problem.)

Według odpowiedzi Fractalfa jest to naprawione w wersji 1.4.0

Ze strony MNIEJ :

Jeśli chcesz zaimportować plik CSS i nie chcesz, aby MNIEJ go przetwarzało, użyj rozszerzenia .css:

@import "lib.css"; Dyrektywa pozostanie taka, jaka jest, i skończy się w wyniku CSS.

Jak wskazuje jitbit w komentarzach poniżej, jest to naprawdę przydatne tylko do celów programistycznych, ponieważ nie chciałbyś, aby niepotrzebne było @importzajmowanie cennej przepustowości.

Spróbuj tego :

@import "lib.css";

Z oficjalnej dokumentacji:

Możesz importować zarówno pliki css, jak i mniej. Przetwarzane jest tylko mniej instrukcji importu plików, instrukcje importu plików css są przechowywane bez zmian. Jeśli chcesz zaimportować plik CSS i nie chcesz, aby MNIEJ go przetwarzało, użyj rozszerzenia .css:

Źródło: http://lesscss.org/

Jeśli chcesz tylko zaimportować plik CSS jako odniesienie (np. Aby użyć klas w Mixins), ale nie dołączasz całego pliku CSS w wyniku, możesz użyć @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;
}

* Wynik (my.css) z lessc my.less out/my.css*

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

używam lessc 2.5.3

Jeśli chcesz zaimportować plik css, który powinien być traktowany jako mniej, użyj tej linii:

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

od 1.5.0 możesz używać słowa kluczowego „inline”.

Przykład: @import (wbudowany) „not-mniej-kompatybilny.css”;

Użyjesz tego, gdy plik CSS może nie być mniej kompatybilny; Wynika to z faktu, że chociaż Less obsługuje większość znanych standardów CSS, nie obsługuje komentarzy w niektórych miejscach i nie obsługuje wszystkich znanych hacków CSS bez modyfikacji CSS. Możesz więc użyć tego, aby dołączyć plik do wyniku, tak aby cały CSS znajdował się w jednym pliku.

(źródło: http://lesscss.org/features/#import-directives-feature )