Stiller, Angular 2

Question

'daki inspect öğesinde gömülü olarak görünüyor Neden internetten dashgum adlı ücretsiz bir HTML teması indirdim. Ben açısal-uç kullanarak Angular2 uygulaması için uygularım. Css dosyalarını .scss'ye dönüştürdüm ve kodu açısal uygulamaya yapıştırdım. Sonra küresel tarzlarda dosyaları ithal böyle bir uygulamaya stilleri uygulamak için styles.scss adlı file:

@import url('./scss/bootstrap.scss'); 
@import url('./scss/font-awesome/css/font-awesome.scss'); 
@import url('./scss/zabuto_calender.scss'); 
@import url('./scss/gritter/css/jquery.gritter.scss'); 
@import url('./scss/lineicons/style.scss'); 
@import url('./scss/style.scss'); 
@import url('./scss/style-responsive.scss'); 

Ben ayıklama sırasında yüzleşiyorum sorun gömülü olarak tüm stilleri görünür olmasıdır böyle tarayıcıda stilleri (stil etiketi fark):

Ben tema gibi teftiş ederken stil dış stilleri olarak görünmesini istiyorum. Aşağıdaki ekran görüntüsünde fark edin: I teftiş sırasında gömülü görünmesine stilleri için hiçbir belirgin değişiklikler yaptı olarak

Bu Açısal 2'de varsayılan ayarlardır. İnceleme yapılırken stillerin dış stiller olarak görünmesi için Angular 2'deki ayarları değiştirmenin bilinen herhangi bir yolu var mı? Gömülü stiller, hata ayıklamamı zorlaştırıyor. Çözüme yönelik her türlü yardım memnuniyetle karşılanacaktır.

Answer 1

İlk tavsiyem (gibi official Angular CLI documentation diyor) böyle .angular-cli.json içindeki global kütüphane koymaktır:

... 
    "styles": [ 
    "../node_modules/bootstrap/dist/css/bootstrap.min.css", 
    "../node_modules/font-awesome/css/font-awesome.min.css", 
    "styles.scss" 
    ], 
    ... 

Sonra sadece tarayıcı denetiminde kaynak dosyaları görmek için --extract-css parametreyle uygulamayı çalıştırın:

ng serve --extract-css 

Ve bu olacak:

Answer 2

Genel styles.scss dosyasında içe aktarılan stillerin her zaman tarayıcıda inceleme yaparken gömülü olarak göründüğünü öğrendim. Eğer css'nin harici stiller olarak görünmesini istiyorsak, onu bileşenlerde kullanmak zorundayız.

Düzenleme: Yukarıdaki

Bkz toioski cevabı.