Angular-cli z css do scss

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'(…)

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 )

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

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

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

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

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"
  }
}

Otwórz plik angular.json

1. zmiana z

"schematics": {}

do

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

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

Dla Angular 6,

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

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

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

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

Użyj polecenia:

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

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

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

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

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

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 .