Nasıl Angular2 @View stilleri ile TypeScript WebPack ts-loader entegre edilir

Question

Angular2 + WebPack + Typescript 1.7 stack + SASS + CommonJs kullanıyorum.

Web style SASS yükleyici, "style! Css! Sass" yükleyicileriyle birlikte scss dosyalarını izlemek üzere yapılandırıldı. Benim bileşeninde

Ben stilleri veya styleUrls bu bileşen için satır içi stilleri veya stil url geçmek için kullanılabilecek parametreleri içeren @View dekoratör var.

Bu @View parametrelerinden birini belirteceğim durumunda Angular2 otomatik olarak belirtilen css dosyalarını yükler veya (veya satır içi css) ve benim için çalışır.

Ama durumunda ben küstahlık-yükleyici kullanacağız + css için SCSS ve yerleşik bunun benim js dosyasına (i ts-yükleyici kullanıyorum ve tüm komut birleştirilecek derlemek beni sağlayacak o) (gerektirir app.js).

Bu yüzden css dosyasını Angular2 tarafından otomatik olarak önyüklemek için stylesUrl kullanabilirsiniz.

@View({ stylesUrl: 'my.css'}) export class Component{} 

Ya ('*. SCSS') gerektiren benim app.js

require('styles/my.scss'); 
@View({}) export class Component{} 

bunun için daha iyi bir yaklaşım i Angular2 yol demek, nedir içine css birleştirmek için kullanabilir?

Ayrıca, tüm scss dosyalarından bazı common.css öneklerini yapılandırabilir ve yalnızca bileşen için herhangi bir stil belirlemekten kaçınıyorum. Ve orada sadece 1 common.css + common.css.map dosyası (hata ayıklama için) index.html

S.S. Son yaklaşım hakkında (tüm css dosyalarını birleştirin)

//webpack.config.js 
loaders: [ 
     { 
      test: /\.scss$/, 
      loader: ExtractTextPlugin.extract('style', ['css?sourceMap', 'sass?sourceMap']), 
      include: path.join(__dirname, 'src', 'styles'), 
     } 
... 
    plugins: [ 
    new ExtractTextPlugin("assets/path/styles.css?[hash]-[chunkhash]-[contenthash]-[name]", { 
     disable: false, 
     allChunks: true 
    }) 


//index.html 
<link rel="stylesheet" href="assets/path/styles.css" /> 

Şimdi CD'lere css'ye giden bağlantılar var. Ve tüm özel css (scss ile yazılmış), tüm bileşenler için bir kez yüklenen 1 dosya styles.css ile birleştirildi.

Bu yaklaşım sourceMap etkindir. Ama hata ayıklamak için hangi scss dosya açıklığa kavuşturmak biraz zor .. Ve ayrıca herhangi bir bilgi yok Angular @View bildirimi

Answer 1

iyi bir soru veya soruları tam olarak anlamadım, ama deneyeceğim Anladığım şeyi cevapla. Yani benim için belirttiğiniz 2 yoldan hiçbirinin en iyisi olmadığını düşünüyorum. ne kullanmaktır:

1. ait view encapsulations kullanmak
2. yeteneğini küstahlığı kullanarak ve benim kod doğrudan girilmesi:

   @Component({ 
   selector: 'message', 
   template: '<p class = {{class}}> whatever html </p>', 
   styles: [ require('./style.scss')], 
   }) 
   
   export class Comp{} 
   

   yüzden böyle stil sayfasını ekleyerek ben 2 şey kazanmış Açısal 2