एंगुलर 2 @ दृश्य शैलियों

Question

के साथ टाइपस्क्रिप्ट वेबपैक टीएस-लोडर को एकीकृत करने के लिए कैसे मैं कोणीय 2 + वेबपैक + टाइपस्क्रिप्ट 1.7 स्टैक + एसएएसएस + कॉमनजे का उपयोग कर रहा हूं।

मेरे पास वेबपैक SASS लोडर है जो "शैली! सीएसएस! एसएएस" लोडर के साथ स्कैस फ़ाइलों के लिए देखने के लिए कॉन्फ़िगर किया गया है।

मेरी घटक में मैं @View डेकोरेटर जो शैलियों या styleUrls मानकों जो इस घटक के लिए इनलाइन शैलियों या शैली यूआरएल पारित करने के लिए इस्तेमाल किया जा सकता शामिल है।

यदि मैं उन @ दृश्य पैरामीटर में से एक निर्दिष्ट करूंगा तो Angular2 स्वचालित रूप से निर्दिष्ट सीएसएस फ़ाइलों को लोड करेगा या (या इनलाइन सीएसएस होगा) और यह मेरे लिए काम करता है।

लेकिन अगर मैं एसएएस-लोडर + आवश्यकता() की उपयोग करूंगा जो मुझे सीएसएस में एसएसएस को संकलित करने और इसे मेरे जेएस फ़ाइल में अंतर्निहित करने में सक्षम बनाता है (मैं टीएस लोडर का उपयोग कर रहा हूं और मेरी सभी स्क्रिप्ट्स विलय हो गई हैं app.js)।

तो मैं Angular2 द्वारा स्वचालित रूप से सीएसएस फ़ाइल को प्रीलोड करने के लिए styleUrl का उपयोग कर सकता हूं।

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

या मैं ('*। एससीएसएस') की आवश्यकता होती है मेरी app.js

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

क्या इस के लिए बेहतर दृष्टिकोण, मैं Angular2 तरह से मतलब है में सीएसएस विलय करने के लिए उपयोग कर सकते हैं?

इसके अलावा मैं सभी scss फ़ाइलों से कुछ सामान्य.css को पूर्व-निर्माण कर सकता हूं और घटक के लिए किसी शैलियों को निर्दिष्ट करने से बच सकता हूं। और वहां केवल 1 common.css + common.css.map फ़ाइल (डीबगिंग के लिए) होगी index.html

पीएस में शामिल पिछले दृष्टिकोण के बारे में

//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" /> 

तो अब मैं सीएसएस के लिए CDN विक्रेता लिंक (सभी सीएसएस फ़ाइलें विलय)। और मेरे सभी कस्टम सीएसएस (एसएसएस में लिखे गए) को 1 फ़ाइल शैलियों.css में विलय कर दिया गया है, जो सभी घटकों के लिए एक बार लोड किया गया है।

यह दृष्टिकोण स्रोत मैप सक्षम है। लेकिन यह स्पष्ट करने के लिए थोड़ा सा मुश्किल है कि कौन सी स्कैस फ़ाइल डीबग में संशोधित करने के लिए .. और एंगुलर @ व्यू घोषणा

Answer 1

अच्छी तरह से मुझे कोई प्रश्न या प्रश्न समझ में नहीं आया है, लेकिन मैं कोशिश करने की कोशिश करूंगा जवाब मैं क्या समझ गया। तो मेरे लिए मुझे लगता है कि आपके द्वारा निर्दिष्ट 2 तरीकों में से कोई भी सबसे अच्छा नहीं है। क्या मैं का उपयोग करें:

1. सास का उपयोग करने और
2. की view encapsulations उपयोग करने की क्षमता मेरे कोड पर सीधे inputting:

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

   ताकि तरह शैली पत्रक शामिल करके मैं 2 बातें प्राप्त की कोणीय 2