Jestem nowy w Angular i pochodzę ze społeczności Ember. Próba użycia nowego Angular-CLI opartego na Ember-CLI.
Muszę znać najlepszy sposób obsługi SASS w nowym projekcie Angular. Próbowałem użyć ember-cli-sass
repozytorium, aby sprawdzić, czy będzie działało, ponieważ wiele podstawowych komponentów Angular-CLI jest pozbawionych modułów Ember-CLI.
Nie działało, ale nie jestem pewien, czy coś źle skonfigurowałem.
Jaki jest najlepszy sposób organizowania stylów w nowym projekcie Angular? Byłoby miło mieć plik sass w tym samym folderze co komponent.
angular
sass
angular-cli
JDillon522
źródło
źródło
Odpowiedzi:
Inne możliwe rozwiązania i objaśnienia:
Aby utworzyć nowy projekt z kątowym interfejsem CLI z obsługą sass, spróbuj tego:
Możesz także użyć, a
--style=sass
jeśli nie znasz różnicy, przeczytaj ten krótki i łatwy artykuł, a jeśli nadal nie wiesz, po prostuscss
kontynuuj naukę.Jeśli masz projekt kątowy 5, użyj tego polecenia, aby zaktualizować konfigurację dla swojego projektu.
Dla najnowszych wersji
Dla Angulara 6, aby ustawić nowy styl w istniejącym projekcie z CLI:
Lub Bezpośrednio do angular.json:
źródło
ng set defaults.styleExt scss
style
właściwośćscss
w.angular-cli.json
ng set defaults.styleExt scss --global
ng config schematics.@schematics/angular:component.styleext scss
Aktualizacja dla Angular 6+
Nowe projekty
Podczas generowania nowego projektu za pomocą Angular CLI określ preprocesor css jako
Użyj składni SCSS
Użyj składni SASS
Aktualizacja istniejącego projektu
Ustaw domyślny styl dla istniejącego projektu , uruchamiając
Użyj składni SCSS
Użyj składni SASS
Powyższe polecenie zaktualizuje plik obszaru roboczego (angular.json) o
gdzie
styleext
może byćscss
lubsass
zgodnie z wyborem.Oryginalna odpowiedź (dla Angulara <6)
Nowe projekty
W przypadku nowych projektów możemy ustawić opcje
--style=sass
lub--style=scss
zgodnie z pożądanym smakiem SASS / SCSSUżyj składni SASS
Użyj składni SCSS
następnie zainstalować
node-sass
,Aktualizacja istniejących projektów
Aby
angular-cli
skompilować pliki sassnode-sass
, musiałem uruchomić,który instaluje
node-sass
. Następniedla składni SASS
dla składni SCSS
aby ustawić domyślny styleExt na sass
(lub)
zmień
styleExt
nasass
lubscss
dla żądanej składni w.angular-cli.json
,dla składni SASS
dla składni SCSS
Chociaż generowało błędy kompilatora.
co zostało naprawione poprzez zmianę linii
.angular-cli.json
,albo,
dla składni SASS
dla składni SCSS
źródło
angular-cli.json
jest w rzeczywistości.angular-cli.json
. Kiedy zdałem sobie z tego sprawę, zredagowałem to i działa to idealnie. Dziękuję Ci.angular-cli.json
został.angular-cli.json
ostatnio zmieniony jako plik ukryty ( ) (rc2). Naprawiony..css
pliku, konieczne może być jego zamknięcie i ponowne otwarcie w edytorze, aby poprawnie rozpoznać składnię sass. Dotyczy to nawet najnowszego programu Visual Studio,Cytat z oficjalnej repozytorium github tutaj -
Spójrz tutaj
źródło
Powiedz angular-cli, aby zawsze domyślnie używał scss
Aby uniknąć przechodzenia za
--style scss
każdym razem, gdy generujesz projekt, możesz dostosować globalną konfigurację domyślną angular-cli za pomocą następującego polecenia:Należy pamiętać, że niektóre wersje angular-cli zawierają błąd podczas odczytywania powyższej flagi globalnej ( patrz link ). Jeśli Twoja wersja zawiera ten błąd, wygeneruj swój projekt za pomocą:
źródło
--style=scss
Jak powiedział Mertcan, najlepszym sposobem użycia scss jest stworzenie projektu z tą opcją:
Angular-cli dodaje również opcję zmiany domyślnego preprocesora css po utworzeniu projektu za pomocą polecenia:
Aby uzyskać więcej informacji, możesz poszukać ich dokumentacji:
https://github.com/angular/angular-cli
źródło
ng set
nie działa na ustawienia wapps
tablicy. Na przykład.ng set apps.prefix blah
zgłasza „Nieoczekiwany token b w JSON na pozycji 0”.Zauważyłem bardzo denerwującą gotcha w przenoszeniu do plików scss !!! Jeden MUSI przejść z prostego:
styleUrls: ['app.component.scss']
dostyleUrls: ['./app.component.scss']
(dodać./
) wapp.component.ts
Co dzieje się podczas generowania nowego projektu, ale najwyraźniej nie podczas tworzenia projektu domyślnego. Jeśli widzisz rozwiązywanie błędów podczas kompilacji ng, sprawdź ten problem. Zajęło mi to tylko ~ 1 godzinę.
źródło
Najlepsze może być
ng new myApp --style=scss
Następnie Angular CLI utworzy dla Ciebie każdy nowy komponent z scss ...
Zauważ, że korzystanie z
scss
niedziałającego w przeglądarce, jak zapewne wiesz, więc potrzebujemy czegoś do skompilowaniacss
, z tego powodu możemy użyćnode-sass
, zainstaluj go tak jak poniżej:i powinieneś być dobry!
Jeśli używasz webpacka, czytaj tutaj:
od Angular startera tutaj .
źródło
ng set --global defaults.styleExt=scss
jest przestarzałe od ng6. Otrzymasz tę wiadomość:Powinieneś użyć:
Jeśli chcesz kierować reklamy na konkretny projekt (zastąp {projekt} nazwą swojego projektu):
źródło
Angular-CLI jest zalecaną metodą i jest standardem w społeczności Angular 2+.
Kreta nowy projekt z SCSS
ng new My-New-Project --style=sass
Konwertuj istniejący projekt (CLI mniejszy niż v6)
ng set defaults.styleExt scss
(przy tej metodzie należy ręcznie zmienić nazwę wszystkich plików .css, nie zapomnij zmienić nazwy plików składowych)
Konwertuj istniejący projekt (CLI większy niż v6)
"@schematics/angular:component": { "styleext": "sass" }
źródło
W przypadku Angular 9.0 i nowszych zaktualizuj
"schematics":{}
obiekt w pliku angular.json w następujący sposób :źródło
style
terazNastępujące powinny działać w kanciastym projekcie CLI 6. Tj. Jeśli otrzymujesz:
Następnie ( pamiętając o zmianie nazwy projektu )
Aby uzyskać domyślną nazwę projektu, użyj:
Jednak: jeśli wykonałeś migrację projektu z <6 do kątowej 6, istnieje duża szansa, że konfiguracja tam nie będzie. W takim przypadku możesz uzyskać:
Dlatego
angular.json
wymagana będzie ręczna edycja .Będziesz chciał wyglądać mniej więcej tak (uwzględniając właściwość styleex):
Wydaje mi się to zbyt skomplikowanym schematem. ¯_ (ツ) _ / ¯
Musisz teraz przejść i zmienić wszystkie pliki css / less na scss i zaktualizować wszelkie odniesienia w komponentach itp., Ale powinieneś być dobry.
źródło
Z dniem 3.10.2019 Anguar zrezygnował z obsługi sassa. Bez względu na to, jaką opcję przekazałeś
--style
podczas uruchamianiang new
, zawsze.scss
generowane są pliki. Szkoda, że wsparcie Sassa zostało porzucone bez żadnego wyjaśnienia.źródło
npm install -g @angular/[email protected]
Ustaw jako globalną wartość domyślną
ng set defaults.styleExt=scss --global
źródło
Integracja preprocesora CSS Angular CLI obsługuje wszystkie główne preprocesory CSS:
Aby użyć tych preprocesorów, po prostu dodaj plik do styleUrls komponentu:
Podczas generowania nowego projektu możesz również zdefiniować rozszerzenie, które chcesz dla plików stylów:
Lub ustaw domyślny styl dla istniejącego projektu:
Uwaga: @ schemics / angular jest domyślnym schematem Angular CLI
Ciągi stylów dodane do tablicy @ Component.styles muszą być zapisane w CSS, ponieważ CLI nie może zastosować procesora wstępnego do stylów wbudowanych.
Na podstawie dokumentacji kątowej https://github.com/angular/angular-cli/wiki/stories-css-preprocessors
źródło
Próbowałem zaktualizować swój projekt, aby używać sass za pomocą tego polecenia
ale dostałem to
Więc usunąłem mój projekt (jak dopiero zaczynałem i nie miałem kodu w moim projekcie) i stworzyłem nowy z ustawionym początkowo sass
Byłbym wdzięczny, gdyby ktoś mógł udostępnić sposób aktualizacji istniejącego projektu, ponieważ byłoby to miłe.
źródło
Krok 1. Zainstaluj pakiet Bulma przy użyciu npm
Krok 2. Otwórz plik angular.json i zaktualizuj następujący kod
Otóż to.
Aby łatwo udostępnić narzędzia Bulma, dodaj stylePreprocessorOptions do angular.json.
BULMA + KĄT 6
źródło