zaimportuj plik .css do pliku .less

228

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

Pan Jonny Wood
źródło
5
LESS wraca do CSS, więc powinieneś móc po prostu zmienić nazwę style.css na style.less, a następnie zaimportować go jak zwykle ... chyba że zmiana nazwy style.css nie jest
możliwa
3
tak, niestety zmiana nazwy pliku .css nie jest tak naprawdę możliwa.
Pan Jonny Wood,
1
Mam ten sam problem. Wesprzyj problem github.com/cloudhead/less.js/issues/303
Yaroslav
5
jeśli nie musisz odwoływać się do pliku .css zewnętrznie, a jednocześnie nie możesz modyfikować (zmieniać nazwy) pliku .css, możesz utworzyć symboliczny link do niego z .lessrozszerzeniem. Następnie odwołaj się do niego jako .lesspliku. 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, wpisz MKLINK /?w oknie poleceń
Ivaylo Slavov
@jackwanders, zmiana nazwy nie jest konieczna, ponieważ LESS wraca do CSS (jak słusznie zaznaczasz). Możesz zaimportować .cssplik za pomocą (less)dyrektywy inline i skorzystać z faktu, że .cssskładnia jest poprawną .lessskładnią
ira

Odpowiedzi:

316

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.

Fractalf
źródło
1
To jest poprawna odpowiedź. Trzeci zaimportuje + skompiluje kod CSS jako mniej kodu i nie pozostawi nienaruszonej dyrektywy.
CMCDragonkai
1
Myślę, że należy użyć @import (dołącz) „lib.css”. Nie podoba mi się semantyka okłamywania kompilatora. Z pewnością, gdy wiesz, że w pliku nie ma żadnego kodu LESS.
16
Spowoduje to utworzenie dodatkowego żądania http dla foo.css, więc (inline)dyrektywa (patrz stackoverflow.com/a/22594082/160968 ) jest teraz preferowana
Urs
1
(inline)nie będzie działać, ponieważ nie przekształca zewnętrznych odniesień do czcionek lub innych @importplików CSS. Po prostu otrzymujesz większy plik css, który powoduje wiele 404 żądań HTTP ....
user3338098,
Cofanie najnowszej edycji, ponieważ była po prostu niepoprawna i nie odpowiadała na pytanie.
siedem faz - maks.
246

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';
mpen
źródło
7
Idealny. Działa to dobrze, gdy chcesz skonkatować niektóre pliki CSS (np. W ie7.less), ale niekoniecznie je przetwarzamy (np. Bootstrap-ie7 używa wyrażeń, których LESS nie obsługuje dobrze).
Joe
4
Bardzo pomocne. @import (css) "styles.css";nie działało dla mnie.
ivkremer,
10
Oba dotyczą różnych przypadków użycia. Z (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 @importing .csspliku jest taka sama jak z (css)flagą - przeczytaj docs o więcej informacji :)
neemzy
więc to oczywiście nie zadziała, jeśli twój plik css ma @importdyrektywy, ponieważ wymagałoby to „przetwarzania”.
user3338098,
Czy „inline” oznacza, że ​​wszystkie importowane elementy również będą wstawiane? Czy istnieje sposób na rekurencyjne wstawianie?
latarnia
29

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

Gudradain
źródło
2
Przyjęta odpowiedź miała początkowo poprawną opcję (tak, (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.
siedem faz - maks.
1
Możesz łączyć „referencje” i „mniej”:@import (less, reference) "foo.css"
Skarllot
28

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

Matematyka
źródło
4
Technicznie nie jest to import pliku CSS.
nilskp
@nilskp masz rację; ale jeśli chcesz użyć klas w innym pliku, potrzebujesz pliku LESS, a nie CSS.
Mathletics
1
@nilskp, czy mówisz, że zmiana rozszerzenia to zbyt wiele, aby poprosić o sparsowanie pliku jako MNIEJ?
Mathletics,
23
Tak, oczywiście, że tak. Spróbuj myśleć poza jakimś małym domowym projektem, w którym posiadasz wszystkie pliki. Pomyśl o większych, wieloosobowych projektach, w których nie wszyscy używają MNIEJ. Istnieje mnóstwo przypadków użycia, w których zmiana nazw plików nie jest możliwa.
nilskp
1
Powinieneś się przejmować, jeśli twój css zawiera coś takiego: calc (100% - 45px); i chcesz tego w przeglądarce. Jeśli mniej przetwarza plik jako mniej, końcowy wynik będzie następujący: calc (55%); ponieważ mniej oblicza.
Christof Aenderl
8

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.

webdevkit
źródło
14
Nie spowoduje to IMPORTU pliku, pozostawi nienaruszoną dyrektywę @import. Wciąż będzie działać, ale należy unikać importowania css - spójrz na to developers.google.com/speed/docs/best-practices/…
Alex
5
Dzięki za informacje @jitbit. Osobiście uważam, że jest łatwiejsze w użyciu @importpodczas programowania, a następnie łączę i minimalizuję zaimportowane pliki w jednym arkuszu stylów podczas przenoszenia do produkcji.
webdevkit,
1
Jeśli dokładnie przeczytasz pytanie (a nie tylko wiersz nagłówka), zobaczysz, że OP chce odwoływać się do klasy w pliku css jako mixin, co nie jest możliwe, jeśli jest ono po prostu analizowane jako zwykły import css.
respekt
7

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/

Dr.Kameleon
źródło
2
Jeśli dokładnie przeczytasz pytanie (a nie tylko wiersz nagłówka), zobaczysz, że OP chce odwoływać się do klasy w pliku css jako mixin, co nie jest możliwe, jeśli jest ono po prostu analizowane jako zwykły import css.
zachwiał
6

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

hinneLinks
źródło
Właśnie tego potrzebowałem. Jednak musiałem użyć rozszerzyć składnię: &:extend(.reference-class all);. Bezpośrednie odwołanie do klasy spowodowało błąd kompilacji.
Jens Neubauer,
4

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

.ie {
  @import (less) 'ie.css';
}
Charles
źródło
3

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 )

Pieter-Jan
źródło