Aktualizacja dla Angular 6 +

1. Nowe Projekty

   Kiedy generowanie nowego projektu Z Angular CLI, określ pre-procesor css jako

   • Użyj składni SCSS

     ng new sassy-project --style=scss
     

   • Użyj składni SASS

     ng new sassy-project --style=sass
     

2. Aktualizacja istniejącego projektu

   Ustaw domyślny styl w sprawie istniejącego projektu przez running

   • Użyj składni SCSS

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

   • Użyj składni SASS

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

   Powyższe polecenie zaktualizuje plik obszaru roboczego (angular.json) z

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

   Gdzie styleext Może być scss lub sass zgodnie z wyborem.

Oryginalna odpowiedź (Dla kątowej

Nowe projekty

Dla nowych projektów możemy ustawić opcje --style=sass lub --style=scss według pożądanego smaku SASS / SCSS

• Użyj składni SASS

  ng new project --style=sass 
  

• Użyj składni SCSS

  ng new project --style=scss 
  

Następnie zainstaluj node-sass,

npm install node-sass --save-dev

Aktualizacja istniejących projektów

Aby angular-cli aby skompilować pliki sass za pomocą node-sass, musiałem uruchomić,

npm install node-sass --save-dev 

Który instaluje node-sass. Wtedy

• Dla SASS składnia

  ng set defaults.styleExt sass
  

• Dla składni SCSS

  ng set defaults.styleExt scss
  

Aby ustawić domyślny stylext na sass

(lub)

Zmień styleExt na sass lub scss dla żądanej składni w .angular-cli.json,

• Dla składni SASS

  "defaults": {
       "styleExt": "sass",
  }
  

• Dla składni SCSS

  "defaults": {
       "styleExt": "scss",
  }
  

ERROR in multi styles
Module not found: Error: Can't resolve '/home/user/projects/project/src/styles.css' in '/home/user/projects/project'
 @ multi styles 

Który został naprawiony przez zmianę linii z .angular-cli.json,

"styles": [
        "styles.css"
      ],

Do albo,

• Dla składni SASS

  "styles": [
          "styles.sass"
        ],
  

• Dla składni SCSS

  "styles": [
          "styles.scss"
        ],
  

Cytowane przez urzędników github repo tutaj -

Aby użyć jednego wystarczy zainstalować na przykład

npm install node-sass

I zmienić nazwę .pliki css w Twoim projekcie do .scss lub .sass. Zostaną one skompilowane automatycznie. Argument opcji Angular2App zawiera opcje sassCompiler, lessCompiler, stylusCompiler i compassCompiler, które są przekazywane bezpośrednio do odpowiednich preprocesorów CSS.

Zobacz tutaj

• https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

Powiedz angular-cli, aby zawsze domyślnie używał scss

Aby uniknąć przekazywania --style scss za każdym razem, gdy generujesz projekt, możesz dostosować domyślną konfigurację angular-cli globalnie, za pomocą następującego polecenia:

ng set --global defaults.styleExt scss

Należy pamiętać, że niektóre wersje angular-cli zawierają błąd z odczytaniem powyższej flagi globalnej (patrz link ). Jeśli Twoja wersja zawiera ten błąd, Wygeneruj projekt za pomocą:

ng new some_project_name --style=scss

Jak Mertcan powiedział, najlepszym sposobem użycia scss jest stworzenie projektu z tą opcją:

ng new My_New_Project --style=scss 

Angular-CLI dodaje również opcję zmiany domyślnego preprocesora css po utworzeniu projektu za pomocą polecenia:

ng set defaults.styleExt scss

Więcej informacji można znaleźć tutaj dla ich dokumentacji:

Https://github.com/angular/angular-cli

Zauwazylem, ze bardzo niecierpliwie mam cie w przenoszeniu do plików scss!!! Należy przejść z prostej: styleUrls: ['app.component.scss'] do styleUrls: ['./app.component.scss'] (dodaj ./) w app.component.ts

Co robi ng, gdy generujesz nowy projekt, ale pozornie nie, gdy tworzony jest projekt domyślny. Jeśli podczas kompilacji ng widzisz rozwiązywanie błędów, Sprawdź ten problem. Zajęło mi to tylko ~ 1 godzinę.

Best could be ng new myApp --style=scss

Wtedy Angular CLI utworzy dla Ciebie dowolny nowy komponent z scss ...

Zauważ, że używanie scss nie działa w przeglądarce, Jak zapewne wiesz.. musimy więc coś skompilować do css, z tego powodu możemy użyć node-sass, zainstalować go jak poniżej:

npm install node-sass --save-dev

Jeśli korzystasz z webpacka, przeczytaj tutaj:

Wiersz poleceń w folderze projektu, w którym Twoje istniejące paczka.json jest: npm install node-sass sass-loader raw-loader --save-dev

W webpack.common.js wyszukaj "rules:" i dodaj ten obiekt do koniec tablicy reguł (nie zapomnij dodać przecinka na końcu poprzedni obiekt):

{
  test: /\.scss$/,
  exclude: /node_modules/,
  loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
}

Następnie w składniku:

@Component({
  styleUrls: ['./filename.scss'],
})

Jeśli chcesz mieć globalną obsługę CSS to na najwyższym poziomie komponentu (prawdopodobnie app.komponent.ts) Usuń enkapsulację i dołącz SCSS:

import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'app',
  styleUrls: ['./bootstrap.scss'],
  encapsulation: ViewEncapsulation.None,
  template: ``
})
class App {}

Z rozrusznika kątowego tutaj .

ng set --global defaults.styleExt=scss jest przestarzały od ng6. Otrzymasz tę wiadomość:

Get / set zostały wycofane na rzecz polecenia config

Powinieneś użyć:

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

Jeśli chcesz kierować konkretny projekt (zastąp {projekt} nazwą Twojego projektu):

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

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

Konwersja istniejącego projektu (CLI mniej niż V6)

ng set defaults.styleExt scss

(musi zmienić nazwę wszystkich .pliki css ręcznie przy użyciu tego podejścia, nie zapomnij zmienić nazwy w plikach składowych)

Konwersja istniejącego projektu (CLI większe niż v6)

1. Zmień nazwę wszystkich plików CSS na SCSS i aktualizuj komponenty, które się do nich odwołują.
2. Dodaj następujący klucz" Schematy " kąta.json (Zwykle linia 11):

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

Poniższe powinny działać w projekcie angular CLI 6. Czyli Jeśli otrzymujesz:

Get / set zostały wycofane na rzecz polecenia config.

npm install node-sass --save-dev

Then ( upewniając się, że zmienisz nazwę projektu )

ng config projects.YourPorjectName.schematics.@schematics/angular:component.styleext sass

Aby uzyskać domyślną nazwę projektu użyj:

ng config defaultProject

Jednakże: Jeśli migracja projektu z

Nieprawidłowy znak JSON: "s" at 0: 0

Dlatego wymagana będzie ręczna edycja angular.json.

Będziesz chciał, aby wyglądało to mniej więcej tak (biorąc pod uwagę właściwość styleex):

...
"projects": {
    "Sassy": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      }
...

Będziesz teraz musiał zmienić wszystkie swoje pliki css / less, aby były scss i zaktualizować wszelkie odniesienia w komponentach itp., ale powinieneś być gotowy.

Ustaw jako domyślną globalną

ng set defaults.styleExt=scss --global

Integracja preprocesora CSS Angular CLI obsługuje wszystkie główne preprocesory CSS:

Aby użyć tych preprocesorów wystarczy dodać plik do stylu komponentu:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app works!';
}

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

ng new sassy-project --style=sass

Lub ustawić domyślny styl w istniejącym projekcie:

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

Uwaga: @schematics / angular jest domyślnym schematem dla Angular CLI

Ciągi stylów dodane do [email protected] tablica musi być napisana w CSS, ponieważ CLI nie może zastosować pre-procesora do stylów wbudowanych.

Na podstawie dokumentacji kątowej https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

Próbowałem zaktualizować mój projekt, aby użyć sass używając tego polecenia

Ng set defaults.styleExt scss

Ale mam to

Get / set zostały wycofane na rzecz polecenia config.

• Angular CLI: 6.0.7
• node: 8.9.0
• OS: linux x64
• kąt: 6.0.3

Więc usunąłem mój projekt (ponieważ dopiero zaczynałem i nie miałem kodu w moim projekcie) i stworzyłem nowy z sass początkowo set

Ng new my-sassy-app -- style = scss

Ale byłbym wdzięczny, gdyby ktoś mógł udostępnić sposób na aktualizację istniejącego projektu, ponieważ byłoby miło.

Krok 1. Instalacja pakietu bulma przy użyciu npm

npm install --save bulma

Krok 2. Otwarty kątowy.json i update po kodzie

...
 "styles": [
 "node_modules/bulma/css/bulma.css",
 "src/styles.scss"
 ],
...

Aby łatwo wyeksponować narzędzia Bulmy, dodaj stylePreprocessorOptions do angular.json.

...
 "styles": [
 "src/styles.scss",
 "node_modules/bulma/css/bulma.css"
  ],
 "stylePreprocessorOptions": {
 "includePaths": [
    "node_modules",
    "node_modules/bulma/sass/utilities"
 ]
},
...

BULMA + KĄTOWA 6