Css'den scss'ye açısal-cli

Kullanmak istersem aşağıdaki komutu çalıştırmam gerektiğini söyleyen belgeleri okudum scss:

ng set defaults.styleExt scss

Ancak bunu yaptığımda ve o dosyayı yaptığımda, konsolumda hala şu hatayı alıyorum:

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

Angular 6 için Resmi belgelere bakın

Not: For @angular/clidaha eski sürümleri 6.0.0-beta.6kullanıma ng setyerine ng config.

Mevcut projeler için

Varsayılan cssstillerle kurulmuş mevcut bir açısal klibi projesinde birkaç şey yapmanız gerekecek:

1. Varsayılan stil uzantısını şu şekilde değiştirin: scss

.angular-cli.json(Angular 5.x ve daha eski) veya angular.json(Angular 6+) içinde manuel olarak değiştirin veya çalıştırın:

ng config defaults.styleExt=scss

Bir hata alırsanız: Value cannot be found.şu komutu kullanın:

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

(* kaynak: Açısal CLI SASS seçenekleri )

2. Mevcut .cssdosyalarınızı olarak yeniden adlandırın .scss(yani, styles.css ve app / app.component.css)

3. Styles.scss bulmak için CLI'yi işaret edin

İçindeki dosya uzantılarını manuel olarak değiştirin apps[0].styles.angular.json

4. Yeni stil dosyalarınızı bulmak için bileşenleri işaret edin

styleUrlsYeni dosya adlarınızla eşleşecek şekilde bileşenlerinizi değiştirin

Gelecek projeler için

@Serginho'nun bahsettiği gibi, ng newkomutu çalıştırırken stil uzantısını ayarlayabilirsiniz.

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

Gelecekte oluşturacağınız tüm projeler için varsayılanı ayarlamak isterseniz aşağıdaki komutu çalıştırın:

ng config --global defaults.styleExt=scss

Ng6'dan itibaren bu, aşağıdaki kodun angular.jsonkök seviyesinde eklenmesiyle gerçekleştirilebilir :

El ile değiştir .angular.json:

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

Angular.json dosyasını açın

1. değiştir

"schematics": {}

için

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

2. (iki yerde)

"src/styles.css"

için

"src/styles.scss"

ardından tüm .cssdosyaları kontrol edip yeniden adlandırın ve component.ts dosyalarını styleUrls dosyasını güncelleyin..css to .scss

Angular 6 için,

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

not: @ schematics / angular, Angular CLI için varsayılan şemadır

Angular CLI için CSS Ön İşlemci entegrasyonu: 6.0.3

Yeni bir proje oluştururken, stil dosyaları için hangi uzantıyı istediğinizi de tanımlayabilirsiniz:

ng new sassy-project --style=sass

Veya mevcut bir projede varsayılan stili ayarlayın:

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

Tüm büyük CSS ön işlemcileri için Angular CLI Belgeleri

Mevcut projeler için :

Gelen angular.jsondosyanın

1. Gelen buildparçası ve içinde testparçası değiştirin:

   "styles": ["src/styles.css"], tarafından "styles": ["src/styles.scss"],

2. Değiştir:

   "schematics": {}, tarafından "schematics": { "@schematics/angular:component": { "style": "scss" } },

ng config schematics.@schematics/angular:component.styleext scssKomut kullanmak işe yarıyor ancak yapılandırmayı aynı yere yerleştirmiyor.

Projenizde.css dosyalarınızı şu şekilde yeniden adlandırın:.scss

Yeni bir proje için , bu komut tüm işi yapar:

ng n project-name --style=scss

Global konfigürasyon için

Yeni sürümlerde genel bir komut yok gibi görünüyor

Şu komutu kullanın:

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

Ng6 size benzer göre, bu komutu kullanmanız gerekir mesaja :

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

Bu iş parçacığıyla karşılaşan Nrwl uzantılarının kullanıcıları için : tüm komutlar Nx (örn. ng generate component myCompent) Tarafından yakalanır ve ardından AngularCLI'ye aktarılır.

SCSS'nin bir Nx çalışma alanında çalışmasını sağlama komutu:

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

Bir kaba kuvvet değişikliği uygulanabilir. Bu değişmeye çalışacak, ancak daha uzun bir süreç.

Src / app uygulama klasörüne gidin

1. Bu dosyayı açın: app.component.ts

2. Bu kodu şu styleUrls: ['./app.component.css']şekilde değiştirin:styleUrls: ['./app.component.scss']

3. Kaydet ve kapat.

Aynı klasörde src / app

1. App.component.css dosyası için uzantıyı (app.component.scss) olarak yeniden adlandırın

2. Diğer tüm bileşenler için bu değişikliği uygulayın. (ör. ev, hakkında, iletişim vb.)

Angular.json yapılandırma dosyası yanındadır. Proje kökünde bulunur.

1. Ara ve Değiştir css'i (scss) olarak değiştirin .

2. Kaydet ve kapat.

Son olarak ng serve -o,.

Derleyici sizden şikayet ederse, adımları tekrar gözden geçirin.

App / src'deki adımları yakından takip ettiğinizden emin olun .

Angular'ın (v9) son sürümünde, aşağıdaki kodun eklenmesi gerekir angular.json

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

Aşağıdaki komut kullanılarak eklenebilir:

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