Stilleri global olarak Angular2 uygulamasına nasıl uygularım?

Tam olarak karşı karşıya olduğum senaryoyu vermek için, Zurb'nin Foundation paketini uygulamamda kullanmak için Webpack'i kullanmaya çalışıyorum. paketlenmiş JS, Vakıf SCSS baktığımızda aktarılmıyor, ama en işlemek başvurumun uygulamak için nasıl emin değilim. Stilleri global olarak Angular2 uygulamasına nasıl uygularım?

Ben kök bileşenin tarzı özelliğinde bir require('../../node_modules/foundation.scss/foundation.scss) çalıştı ve o bileşenin HTML stil görünüyor, ama herhangi bir çocuk bileşenlerinin değil HTML. Bunu yapmanın doğru yolu

nedir?

kaynak

2016-03-31 user1381745

-1

onlar tüm uygulamanın uygulanması gerektiğini kök klasöründe index.html dosyasına css dosyaları dahil edin.

Aksi takdirde belirli bileşenlere özgü css dosyalarını içerecek şekilde bileşenleri içinde meta veri stil özelliğini kullanabilirsiniz. yorumlarda açıklama nedeniyle

Güncelleme:

kaynak

2016-03-31 14:07:48 user2263572

üzerinde genişletilebilir kök uygulaması bileşenine bu bileşeni içe bir 'küresel-css' bileşeni oluşturmayı deneyin bunun Webpack ile nasıl çalışacağını açıklamak için? Bir JS dosyasında olmadan Webpacked CSS nasıl enjekte edeceğinizden emin değilim. – user1381745

Güncelleme yanıtı. Scss css için nasıl derleme sorusu var mı? Eğer öyleyse, bunu nasıl yapacağınızı gösteren birçok bağlantı vardır. – user2263572

Hayır. Webpack, SCSS'imi doğru bir şekilde CSS'ye derliyor ve CSS'yi bundle.js dosyama enjekte ediyor. Nasıl yapılacağından emin değilim, o zaman bu bileşenin stilleri özniteliğiyle tek başına bir bileşenin tersine CSS'yi tüm belgeye uygular (bazılarıdır). Örneğinize göre referans verecek bağımsız bir CSS dosyası olmadığından, basit bir bağlantı etiketi yeterli olmaz (keşke ...). – user1381745

Sen WebPack için özü metin eklentisini kullanabilirsiniz. toplam stil edin. Yani stilleri artık javascript içine inlined ancak css demeti dosyası (styles.css) ayrı olan. ayrı css çıktı dosyasının içine girdi parçalar "(style.css") Her gerektiren hamle" hacmi büyüktür, daha hızlı olacaktır çünkü stil sayfası paketi javascript paketine paralel olarak yüklenir. "

https://github.com/webpack/extract-text-webpack-plugin

Yalnızca, yeniden yükleme yapamayacağınız için değiştirmeyeceğiniz css için bunu yapın. Foundation.css için değişiklik yapmayacağınızı farz ediyorum, bu nedenle sadece

kaynak

2016-03-31 22:43:15

için ayrı bir css oluşturun. Yanlış anlaşılma olabilir ama ana temeli css'i root bileşenine dahil etmenin bir yolunu bulmuşsunuz gibi geliyor. css daha sonra başka bir bileşene uygulanmaz mıyım?

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

ve: Bu ithalat gerekir ViewEncapsulation.None

Kök bileşeni İçinde: kapsülleme: Bu durumda daha sonra ise

Ben Kullanmak kök bileşeni ayarlamak gerektiğini düşünüyorum sonra bunu:

@Component({ 
    moduleId: module.id, 
    selector: 'global-css', 
    templateUrl: 'global-css.component.html', 
    styleUrls: ['global-css.component.css'], 
    encapsulation: ViewEncapsulation.None 
})

ViewEncapsulation.None temelde bu bileşen sadece değil Kapsam css yapmak söylüyor.

kök bileşeninde bunu nedense izin değilse, ViewEncapsulation.None sahiptir ve sadece

kaynak

2016-07-08 14:56:15 user1806692

Stilleri global olarak Angular2 uygulamasına nasıl uygularım?

cevap

İlgili konular