Angular-cli z css do scss


140

Przeczytałem dokumentację , która mówi, że jeśli chcę użyć, scssmuszę uruchomić następujące polecenie:

ng set defaults.styleExt scss

Ale kiedy to robię i tworzę ten plik, nadal pojawia się ten błąd w mojej konsoli:

styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT:
no such file or directory, open
'/Users/Egen/Code/angular/src/styles.css'(…)

1
To zadziała tylko dla plików, które wygenerujesz od tego momentu, nie sądzę, że naprawi te, które już masz. Jeśli git diffzobaczysz, co się zmieniło.
jonrsharpe

Ale nie mam jeszcze plików. Po prostu chcę się przełączyć.
Jamie

jak nie masz jeszcze plików? Jeśli tworzysz nowy projekt, dlaczego konfigurujesz go w ten sposób?
jonrsharpe

Zaczynam od angular2. Próbuję to wszystko rozgryźć.
Jamie

1
Jeśli tworzysz nowy projekt, wykonaj czynności ng new whatever --style=scss opisane w dokumentacji . Nie postępuj zgodnie z instrukcjami konfigurowania istniejącego projektu, jeśli to nie jest to, co robisz!
jonrsharpe

Odpowiedzi:


277

W przypadku Angular 6 sprawdź oficjalną dokumentację

Uwaga: w przypadku @angular/cliwersji starszych niż 6.0.0-beta.6użycie ng setzamiast ng config.

W przypadku istniejących projektów

W istniejącym projekcie angular-cli, który został skonfigurowany z domyślnymi cssstylami, będziesz musiał zrobić kilka rzeczy:

  1. Zmień domyślne rozszerzenie stylu na scss

Zmień ręcznie .angular-cli.json(Angular 5.x i starsze) lub angular.json(Angular 6+) lub uruchom:

ng config defaults.styleExt=scss

jeśli pojawi się błąd: Value cannot be found.użyj polecenia:

ng config schematics.@schematics/angular:component.styleext scss

(* źródło: opcje Angular CLI SASS )

  1. Zmień nazwę istniejących .cssplików na .scss(np. Styles.css i app / app.component.css)

  2. Wskaż CLI, aby znaleźć style.scss

Ręcznie zmień rozszerzenia plików apps[0].styleswangular.json

  1. Wskaż komponenty, aby znaleźć nowe pliki stylów

Zmień styleUrlsw komponentach, aby pasowały do ​​nowych nazw plików

Do przyszłych projektów

Jak wspomniał @Serginho, możesz ustawić rozszerzenie stylu podczas uruchamiania ng newpolecenia

ng new your-project-name --style=scss

Jeśli chcesz ustawić wartość domyślną dla wszystkich tworzonych projektów w przyszłości, uruchom następujące polecenie:

ng config --global defaults.styleExt=scss

6
EDYCJA: Po prostu musiałem odświeżyć kreatora w czasie rzeczywistym. Działa poprawnie
Cristian Traìna

1
@ angular / cli 1.7.3: zmiana defaults.styleExt z cssna scssin .angular-cli.jsonspowoduje automatyczne utworzenie plików scss dla każdego nowego komponentu wygenerowanego w przyszłości.
SimonHawesome

4
ng set defaults.styleExt scss dla istniejących projektów
smedasn Kwietnia


22
@chovy dla najnowszej wersji angular cli, w moim przypadku (6.0.7) użyj tego polecenia dla istniejących projektów: ng config schematics.@schematics/angular:component.styleext scss jak powiedział @ hamilton.lima
Farhan

55

Począwszy od ng6 można to osiągnąć za pomocą następującego kodu dodanego angular.jsonna poziomie głównym:

Zmień ręcznie .angular.json:

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
}

Nie mam schematicsna poziomie głównym, ale zagnieżdżono w moim projekcie w angular.json. Czy powinienem to zignorować i zamiast tego dodać to na poziomie głównym?
mcheah

1
@mcheah, tak, tak też jest skonfigurowany mój i działa.
Eric Soyke

Zostawiłem moje zagnieżdżone w projekcie i wygląda na to, że to też działa dobrze, tak jak FYI dla każdego, kto ma to samo pytanie.
mcheah

Po aktualizacji do najnowszych wersji ng6 mój schematicsjest teraz zagnieżdżony.
Jose Orihuela

To chyba niczego nie zmienia. Nadal nie przetwarza reguł scss w plikach .css.
chovy

36

Otwórz plik angular.json

1. zmiana z

"schematics": {}

do

"schematics": {
           "@schematics/angular:component": {
                   "styleext": "scss"       
             }  
  }
  1. zmienić z (w dwóch miejscach)

"src/styles.css"

do

"src/styles.scss"

następnie sprawdź i zmień nazwy wszystkich .cssplików i zaktualizuj pliki component.ts styleUrls z.css to .scss


4
Krok 1 można wykonać z CLI: ng config schematics.@schematics/angular:component.styleext scss jak określono w oficjalnych dokumentach: github.com/angular/angular-cli/wiki/stories-css-preprocessors
Marian07

13

Dla Angular 6,

ng config schematics.@schematics/angular:component.styleext scss

uwaga: @ schemics / angular to domyślny schemat dla Angular CLI


11

Integracja preprocesora CSS dla Angular CLI: 6.0.3

Podczas generowania nowego projektu możesz również określić, które rozszerzenie chcesz dla plików stylów:

ng new sassy-project --style=sass

Lub ustaw domyślny styl w istniejącym projekcie:

ng config schematics.@schematics/angular:component.styleext scss

Dokumentacja Angular CLI dla wszystkich głównych preprocesorów CSS


1
Invalid JSON character: "s" at 0:0.
chovy

Jak kątowego CLI 6.0.8 ng config(jak wyżej) jest najlepszą metodą, ale nadal trzeba zmieniać nazwy *.cssplików do *.scssi zastąpić odniesienia w angular.jsoncelu style.cssz style.scssI zaktualizować wszystkie składowe referencje plików w styleUrlsnieruchomości z nowymi nazwami. ... to działa świetnie!
gkl

8

W przypadku istniejących projektów :

W angular.jsonpliku

  1. W buildczęści, w testczęści, należy wymienić:

    "styles": ["src/styles.css"], przez "styles": ["src/styles.scss"],

  2. Zastąpić:

    "schematics": {}, przez "schematics": { "@schematics/angular:component": { "style": "scss" } },

Użycie ng config schematics.@schematics/angular:component.styleext scsspolecenia działa, ale nie powoduje umieszczenia konfiguracji w tym samym miejscu.

W projekcie zmień nazwy .cssplików na.scss

W przypadku nowego projektu to polecenie wykonuje całą pracę:

ng n project-name --style=scss

Do konfiguracji globalnej

Wydaje się, że nowe wersje nie mają polecenia globalnego



6

W najnowszej wersji Angular (v9) poniższy kod musi zostać dodany angular.json

  "schematics": {
    "@schematics/angular:component": {
      "style": "scss"
    }
  }

Można dodać za pomocą następującego polecenia:

ng config schematics.@schematics/angular:component.style scss

nie działa dla mnie i próbuję to zrobić po 10
Kross

Angular 10 tutaj działa. Zauważ różnicę "styleext"i "style"w tej odpowiedzi
Pierre

3

W ng6 musisz użyć tego polecenia, według podobnego postu :

ng config schematics.@schematics/angular:component '{ styleext: "scss"}'

3

Dla użytkowników rozszerzeń Nrwl, którzy natkną się na ten wątek: wszystkie polecenia są przechwytywane przez Nx (np. ng generate component myCompent), A następnie przekazywane do AngularCLI.

Polecenie, aby SCSS działało w obszarze roboczym Nx:

ng config schematics.@nrwl/schematics:component.styleext scss


Świetnie, szukałem tego. Dziękuję Ci!
Ruan Petersen

2

Można zastosować brutalną zmianę siły. To zadziała, aby się zmienić, ale to dłuższy proces.

Przejdź do folderu aplikacji src / app

  1. Otwórz ten plik: app.component.ts

  2. Zmień ten kod styleUrls: ['./app.component.css']nastyleUrls: ['./app.component.scss']

  3. Zapisz i zamknij.

W tym samym folderze src / app

  1. Zmień nazwę rozszerzenia pliku app.component.css na (app.component.scss)

  2. Postępuj zgodnie z tą zmianą dla wszystkich pozostałych składników. (np. dom, informacje, kontakt itp.)

Angular.json plik konfiguracyjny znajduje się obok. Znajduje się w katalogu głównym projektu.

  1. Wyszukaj i zamień css zmień go na (scss) .

  2. Zapisz i zamknij.

Na koniec uruchom ponownie ng serve -o.

Jeśli kompilator narzeka na ciebie, powtórz kroki.

Upewnij się, że postępujesz zgodnie z instrukcjami w app / src .

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.