एंगुलरजेएस 2 स्टाइल यूआरएल: कॉन्सटेनेशन के साथ क्या चल रहा है?

Question

मेरा AngularJS 2 एप्लिकेशन में कई स्टाइल फाइलें हैं जिन्हें मैं gulp कार्य के साथ जोड़ता हूं। यह ठीक है, क्योंकि वे एक बड़ी फाइल में समाप्त हो जाएंगे जो मैं ब्राउज़र में उत्पादन में भेजता हूं। मेरा सवाल कोणीय 2 @Component और इसकी styleUrls विशेषता के बारे में है।

@Component({ 
    selector: 'hero', 
    templateUrl: 'hero/hero.template.html', 
    styleUrls: ['hero/hero.component.css'], 

    inputs: ['hero'] 
}) 

धन्यवाद डिफ़ॉल्ट मोड (नकल करते) शैलियों hero/hero.component.css में परिभाषित केवल घटक जैसे मैं चाहता हूँ करने के लिए लागू कर रहे हैं में DOM अनुकरण परछाई। मेरा सवाल है, concatenation के साथ क्या होता है? मैं एकाधिक styleUrls में निर्दिष्ट सभी सीएसएस फ़ाइलों को बंडल नहीं कर सकता क्योंकि हम encapsulation के उद्देश्य को हरा देंगे: एक घटक के लिए शैलियों पूरे दस्तावेज़ को रिसाव करेंगे। हालांकि, मैं नहीं चाहता कि प्रत्येक सीएसएस फ़ाइल के लिए एक घटक जरूरतों के लिए उत्पादन में कॉल करें। मैं उन शैलियों को कैसे जोड़ सकता हूं (और संभवतः उन्हें छोटा कर सकता हूं) ताकि क्लाइंट उन्हें एक ही कॉल में प्राप्त कर सके, और फिर भी encapsulation को संरक्षित रखे?

Answer 1

टेम्पलेट और सीएसएस फ़ाइलों को सिस्टम जेएस प्लगइन का उपयोग कर जेएस फाइलों के साथ बंडल किया जा सकता है।

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

import html from './hero/hero.template.html!text'; 
import css from './hero/hero.component.css!text'; 

@Component({ 
    selector: 'hero', 
    template: html, 
    styles: [css], 
}) 
export class HeroComponent implements { 
}