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, .type
ale 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 ...?!
.less
rozszerzeniem. Następnie odwołaj się do niego jako.less
pliku. Będąc dowiązaniem symbolicznym, odciąża je od synchronizacji, ponieważ zmiany w pliku .css natychmiast wpływają na importowany plik .less. Wadą jest konieczność ponownej kompilacji końcowego css po kolejnych zmianach. Aby uzyskać informacje na temat tworzenia dowiązań symbolicznych w systemie Windows, wpiszMKLINK /?
w oknie poleceń.css
plik za pomocą(less)
dyrektywy inline i skorzystać z faktu, że.css
składnia jest poprawną.less
składniąOdpowiedzi:
Możesz wymusić interpretację pliku jako określonego typu, określając opcję, np .:
wyjdzie
i
zaimportuje
lib.css
plik i potraktuje go jako mniej. Jeśli określisz, że plik jest mniejszy i nie zawiera rozszerzenia, żadne nie zostanie dodane.źródło
(inline)
dyrektywa (patrz stackoverflow.com/a/22594082/160968 ) jest teraz preferowana(inline)
nie będzie działać, ponieważ nie przekształca zewnętrznych odniesień do czcionek lub innych@import
plików CSS. Po prostu otrzymujesz większy plik css, który powoduje wiele 404 żądań HTTP ....Jeśli chcesz, aby Twój CSS został skopiowany do wyjścia bez przetworzenia, możesz skorzystać z
(inline)
dyrektywy . na przykład,źródło
@import (css) "styles.css";
nie działało dla mnie.(css)
,@import
dyrektywa pozostanie niezmieniona, w wyniku czego plik CSS zostanie załadowany przez przeglądarkę w czasie wykonywania; za pomocą(inline)
, zawartość pliku CSS jest faktycznie importowana do skompilowanego arkusza stylów, co jest potrzebne, jeśli na przykład plik ten znajduje się poza katalogiem głównym. Zauważ, że domyślne zachowanie podczas@import
ing.css
pliku jest taka sama jak z(css)
flagą - przeczytaj docs o więcej informacji :)@import
dyrektywy, ponieważ wymagałoby to „przetwarzania”.Musiałem użyć następujących w wersji 1.7.4
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ę .
źródło
(less)
jest jedyną opcją, jeśli chcesz ponownie użyć niektórych stylów pliku css), ale z jakiegoś powodu @ Frralf usunął poprawną część w swojej najnowszej edycji.@import (less, reference) "foo.css"
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
źródło
Ze strony MNIEJ :
Jak wskazuje jitbit w komentarzach poniżej, jest to naprawdę przydatne tylko do celów programistycznych, ponieważ nie chciałbyś, aby niepotrzebne było
@import
zajmowanie cennej przepustowości.źródło
@import
podczas programowania, a następnie łączę i minimalizuję zaimportowane pliki w jednym arkuszu stylów podczas przenoszenia do produkcji.Spróbuj tego :
Z oficjalnej dokumentacji:
Źródło: http://lesscss.org/
źródło
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
reference.css
* Wynik (my.css) z
lessc my.less out/my.css
*używam
lessc 2.5.3
źródło
&:extend(.reference-class all);
. Bezpośrednie odwołanie do klasy spowodowało błąd kompilacji.Jeśli chcesz zaimportować plik css, który powinien być traktowany jako mniej, użyj tej linii:
źródło
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 )
źródło