Opcje Angular CLI SASS

329

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.

JDillon522
źródło
3
Możesz zobaczyć, jak jest używany w github.com/angular/material2, na przykład składnik przycisku github.com/angular/material2/tree/master/src/components/button
Günter Zöchbauer

Odpowiedzi:

544

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"
    }
}
Mertcan Diken
źródło
17
Następnie możesz go zmienić z angular.cli.json w tym pliku znajdują się „defaults”: {„styleExt”: „css”, „prefixInterfaces”: false, „inline”: {„style”: false, „template”: false} Możesz zmienić styleExt
Mertcan Diken
145
ng set defaults.styleExt scss
Sebas
4
nie zapomnij, aby zmienić stylewłaściwość scssw.angular-cli.json
OST
3
ng set defaults.styleExt scss --global
JoshuaDavid
29
Dla Angulara 6 ustanowi nowy styl dla istniejącego projektung config schematics.@schematics/angular:component.styleext scss
Nehal Damania
344

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


Chociaż generowało błędy kompilatora.

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"
          ],
    
Wszystko to
źródło
3
Jedyną rzeczą, która dała mi kłopotów ze było to, że angular-cli.jsonjest w rzeczywistości .angular-cli.json. Kiedy zdałem sobie z tego sprawę, zredagowałem to i działa to idealnie. Dziękuję Ci.
OldTimeGuitarGuy
@OldTimeGuitarGuy Dziękujemy za zwrócenie uwagi, że plik o nazwie raz angular-cli.jsonzostał .angular-cli.jsonostatnio zmieniony jako plik ukryty ( ) (rc2). Naprawiony.
Wszystkie od
Jeśli zmieniasz nazwę istniejącego .csspliku, 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,
Simon_Weaver
1
W przypadku kątowej 6 węzłów sass jest już zainstalowany, więc nie trzeba go instalować.
destroy-everything
1
Mam taką samą konfigurację, ale importowanie plików scss bezpośrednio do komponentów nie działa, a importowanie ich do styles.scss działa dobrze. Używam kątowej cli verison 7+, czy jest jakiś błąd?
Hemant Sankhla
37

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

regnar
źródło
5
może chcieć dodać --save-dev, nie wiem, dlaczego nie ma go w docs że droga, ale stracił ją, gdy zrobiliśmy upgrade a potem nie mógł zrozumieć, dlaczego nasze style zniknęły
regnar
2
Wystąpił problem podczas kompilacji plików sass z wiodącymi podkreśleniami, ale został on naprawiony od wersji kątowej 1.0.0-beta.9
Andy Ford
26

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
Michael P. Bazos
źródło
Korzystam z angularCLI v. 1.2.1 (najnowsza wersja z lipca 2017 r.) I mam opisany błąd. Uruchomiłem to polecenie i wydaje się, że domyślnie działa idealnie dla nowych składników, ale nowe projekty nadal tworzą app.component.css, chyba że podam--style=scss
Jeremy Moritz
21

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

Jared Wadsworth
źródło
3
ng setnie działa na ustawienia w appstablicy. Na przykład. ng set apps.prefix blahzgłasza „Nieoczekiwany token b w JSON na pozycji 0”.
im1dermike
15

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

JoelParke
źródło
3
to jest w app.component.ts dla tych, którzy są zbyt leniwi, aby wyszukiwać :)
emee
5

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 .

Alireza
źródło
5

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"}'
aloisdg przechodzi na codidact.com
źródło
3

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

Edodso2
źródło
3

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"
  }
}
Mahozad
źródło
Dzięki, zastanawiałem się, dlaczego to nie zadziałało i okazuje się, że zmienili nazwę na styleteraz
Dino
2

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.

Neil Watson
źródło
2

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.

Tylko uczeń
źródło
1
Dla każdego, kto zmaga się z tym po 3/10/2019: Angular ponownie wprowadził obsługę sass dla angular -cli w 8.0.0-beta.5 i wkrótce powinien wrócić do głównej gałęzi wydania. Możesz zainstalować wersję przedpremierową znpm install -g @angular/[email protected]
mkrl
Ciekawy. Dzięki za przypomnienie. Po prostu z ciekawości, czy wiesz, dlaczego porzucają wsparcie?
Tylko uczeń
Najwyraźniej zespół Angulara nazywał to składnią „nieistotną”, przynajmniej tak stwierdził w tym PR PR członek zespołu podstawowego, nie mógł znaleźć dalszych informacji na ten temat.
mkrl
1

Ustaw jako globalną wartość domyślną

ng set defaults.styleExt=scss --global

Sajith Mantharath
źródło
0

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

Victor Hugo Arango A.
źródło
0

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.

Junaid
źródło
ktoś odpowiedział na ten istniejących kątowe 6 projektów tutaj
padigan
0

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

BALA
źródło
jest to całkowicie niezgodne ze standardem kątowym, a użycie scss jest tylko wtórnym efektem użycia bulma
netalex