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-sassrepozytorium, 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 CLI wersja 9 (używana do tworzenia projektów Angular 9) teraz pobiera styleze schematów zamiast styleext. Użyj następującego polecenia:
ng config schematics.@schematics/angular:component.style scss
wynikowy plik angular.json powinien wyglądać następująco

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

Inne możliwe rozwiązania i objaśnienia:

Aby utworzyć nowy projekt z kątowym interfejsem CLI z obsługą sass, spróbuj tego:

ng new My_New_Project --style=scss 

Możesz także użyć, a --style=sassjeśli nie znasz różnicy, przeczytaj ten krótki i łatwy artykuł, a jeśli nadal nie wiesz, po prostu scsskontynuuj naukę.

Jeśli masz projekt kątowy 5, użyj tego polecenia, aby zaktualizować konfigurację dla swojego projektu.

ng set defaults.styleExt scss

Dla najnowszych wersji

Dla Angulara 6, aby ustawić nowy styl w istniejącym projekcie z CLI:

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

Lub Bezpośrednio do angular.json:

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

Aktualizacja dla Angular 6+

1. Nowe projekty

   Podczas generowania nowego projektu za pomocą Angular CLI określ preprocesor 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 dla istniejącego projektu , uruchamiając

   • 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) o

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

   gdzie styleextmoże być scsslub sasszgodnie z wyborem.

Oryginalna odpowiedź (dla Angulara <6)

Nowe projekty

W przypadku nowych projektów możemy ustawić opcje --style=sasslub --style=scsszgodnie z pożądanym smakiem SASS / SCSS

• Użyj składni SASS

  ng new project --style=sass 
  

• Użyj składni SCSS

  ng new project --style=scss 
  

następnie zainstalować node-sass,

npm install node-sass --save-dev

Aktualizacja istniejących projektów

Aby angular-cliskompilować pliki sass node-sass, musiałem uruchomić,

npm install node-sass --save-dev 

który instaluje node-sass. Następnie

• dla składni SASS

  ng set defaults.styleExt sass
  

• dla składni SCSS

  ng set defaults.styleExt scss
  

aby ustawić domyślny styleExt na sass

(lub)

zmień styleExtna sasslub scssdla żą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 

co zostało naprawione poprzez zmianę linii .angular-cli.json,

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

albo,

• dla składni SASS

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

• dla składni SCSS

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

Cytat z oficjalnej repozytorium github tutaj -

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

npm install node-sass

i zmień nazwę plików .css w swoim projekcie na .scss lub .sass. Zostaną skompilowane automatycznie. Argument opcji Angular2App zawiera opcje sassCompiler, lessCompiler, stylusCompiler i compassCompiler, które są przekazywane bezpośrednio do odpowiednich preprocesorów CSS.

Spójrz tutaj

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

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

Aby uniknąć przechodzenia za --style scsskażdym razem, gdy generujesz projekt, możesz dostosować globalną konfigurację domyślną angular-cli 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 podczas odczytywania powyższej flagi globalnej ( patrz link ). Jeśli Twoja wersja zawiera ten błąd, wygeneruj swój projekt za pomocą:

ng new some_project_name --style=scss

Jak powiedział Mertcan, 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

Aby uzyskać więcej informacji, możesz poszukać ich dokumentacji:

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

Zauważyłem bardzo denerwującą gotcha w przenoszeniu do plików scss !!! Jeden MUSI przejść z prostego: styleUrls: ['app.component.scss']do styleUrls: ['./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ę.

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 scssniedziałającego w przeglądarce, jak zapewne wiesz, więc potrzebujemy czegoś do skompilowania css, z tego powodu możemy użyć node-sass, zainstaluj go tak jak poniżej:

npm install node-sass --save-dev

i powinieneś być dobry!

Jeśli używasz webpacka, czytaj tutaj:

Wiersz poleceń w folderze projektu, w którym znajduje się istniejący plik package.json: npm install node-sass sass-loader raw-loader --save-dev

W webpack.common.jswyszukaj hasło „rules:” i dodaj ten obiekt na końcu tablicy reguł (nie zapomnij dodać przecinka na końcu poprzedniego obiektu):

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

Następnie w swoim komponencie:

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

Jeśli chcesz globalnej obsługi CSS, na komponencie najwyższego poziomu (prawdopodobnie app.component.ts) usuń enkapsulację i dołącz SCSS:

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

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

od Angular startera tutaj .

ng set --global defaults.styleExt=scssjest przestarzałe od ng6. Otrzymasz tę wiadomość:

get / set zostały zastąpione poleceniem config

Powinieneś użyć:

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

Jeśli chcesz kierować reklamy na konkretny projekt (zastąp {projekt} nazwą swojego 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

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)

1. zmień nazwę wszystkich plików CSS na SCSS i zaktualizuj komponenty, które się do nich odnoszą.
2. dodaj następujący klucz do schematu w angular.json (zwykle wiersz 11):

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

W przypadku Angular 9.0 i nowszych zaktualizuj "schematics":{}obiekt w pliku angular.json w następujący sposób :

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

Następujące powinny działać w kanciastym projekcie CLI 6. Tj. Jeśli otrzymujesz:

get / set zostały zastąpione poleceniem config.

npm install node-sass --save-dev

Następnie ( pamiętając o zmianie nazwy projektu )

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

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

ng config defaultProject

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ć:

Niepoprawny znak JSON: „s” przy 0: 0

Dlatego angular.jsonwymagana będzie ręczna edycja .

Będziesz chciał wyglądać mniej więcej tak (uwzględniając właściwość styleex):

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

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.

Z dniem 3.10.2019 Anguar zrezygnował z obsługi sassa. Bez względu na to, jaką opcję przekazałeś --stylepodczas uruchamiania ng new, zawsze .scssgenerowane są pliki. Szkoda, że ​​wsparcie Sassa zostało porzucone bez żadnego wyjaśnienia.

Ustaw jako globalną wartość domyślną

ng set defaults.styleExt=scss --global

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:

@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ć rozszerzenie, które chcesz dla plików stylów:

ng new sassy-project --style=sass

Lub ustaw domyślny styl dla istniejącego projektu:

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

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

Próbowałem zaktualizować swój projekt, aby używać sass za pomocą tego polecenia

ng set defaults.styleExt scss

ale dostałem to

get / set zostały zastąpione poleceniem config.

• Angular CLI: 6.0.7
• Węzeł: 8.9.0
• System operacyjny: linux x64
• Kątowy: 6.0.3

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

Nowa aplikacja my-sassy -style = scss

Byłbym wdzięczny, gdyby ktoś mógł udostępnić sposób aktualizacji istniejącego projektu, ponieważ byłoby to miłe.

Krok 1. Zainstaluj pakiet Bulma przy użyciu npm

npm install --save bulma

Krok 2. Otwórz plik angular.json i zaktualizuj następujący kod

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

Otóż ​​to.

Aby łatwo udostępnić narzędzia Bulma, 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ĄT 6