webpack angular2 अनुप्रयोग में node_modules से सीएसएस आयात करने के लिए कैसे

Question

मान लें कि हम निम्न स्टार्टर पैक साथ शुरू करते हैं: https://github.com/angularclass/angular2-webpack-starter

npm install के बाद और npm run start सब कुछ ठीक काम करता है।

मैं बाहरी सीएसएस मॉड्यूल जोड़ना चाहता हूं, उदाहरण के लिए बूटस्ट्रैप 4 का सीएसएस (और केवल सीएसएस)। (मुझे पता है कि बूटस्ट्रैप में बूटस्ट्रैप-लोडर है, लेकिन अब मैं सामान्य समाधान के लिए पूछ रहा हूं, इसलिए कृपया बूटस्ट्रैप 4 के बारे में सोचें क्योंकि यह कोई अन्य सीएसएस मॉड्यूल हो सकता है जो एनपीएम के माध्यम से उपलब्ध है)।

मैं NPM के माध्यम से बूटस्ट्रैप स्थापित: npm install bootstrap@4.0.0-alpha.4 --save

सबसे पहले मैंने सोचा था कि यह vendor.browser.ts फाइल करने के लिए import 'bootstrap/dist/css/bootstrap.css'; जोड़ने के लिए पर्याप्त है।

लेकिन ऐसा नहीं है।

उचित समाधान करने के लिए मुझे क्या करना चाहिए?

समाधान मैं के लिए नहीं पूछ रहा हूँ:

1. "परिसंपत्तियों फ़ोल्डर में बाहरी सीएसएस मॉड्यूल की प्रतिलिपि बनाएँ, और वहां से इसका इस्तेमाल करते हैं"
   • मैं एक समाधान है कि एक साथ काम करता है के लिए देख रहा हूँ एनपीएम पैकेज के साथ।
2. "webpack के लिए बूटस्ट्रैप-लोडर का उपयोग करें"
   • जैसा कि मैंने ऊपर वर्णित है, मैं एक सामान्य समाधान के लिए देख रहा हूँ, बूटस्ट्रैप केवल एक यहाँ उदाहरण है।
3. • मैं सटीक स्टार्टर पैक कि मैं ऊपर उल्लेख किया है में एक समाधान के लिए देख रहा हूँ "एक और ढेर का उपयोग करें"।

Answer 1

आप कुछ बदलाव किए बिना कि ढेर का उपयोग कर फ़ाइल अपने विक्रेताओं के लिए किसी भी सीएसएस आयात करने के लिए, सक्षम नहीं होगा।

क्यों?

import 'bootstrap/dist/css/bootstrap.css'; 

यह केवल, स्ट्रिंग के रूप में अपने सीएसएस का आयात कर रहा है, जबकि वास्तविकता में क्या आप चाहते हैं एक शैली टैग में अपने विक्रेता सीएसएस है: ठीक है इस लाइन क्योंकि। इस लाइन encapsulation: ViewEncapsulation.None, की वजह से,

@Component({ 
    selector: 'app', 
    encapsulation: ViewEncapsulation.None, 
    styleUrls: [ 
    './app.component.css' // this why you import css as string 
    ], 

AppComponent में कोई कैप्सूलीकरण है:

{ 
    test: /\.css$/, 
    loaders: ['to-string-loader', 'css-loader'] 
}, 

यह नियम आपके घटकों सीएसएस फ़ाइलें आयात करने की अनुमति देता है, मूल रूप से इस: यदि आप इसे config/webpack.commons.js आप इस नियम मिलेगा जिसका मतलब है कि किसी भी सीएसएस नियम आपके ऐप पर वैश्विक स्तर पर लागू होंगे।तो आप अपने अनुप्रयोग घटक में बूटस्ट्रैप शैलियों आयात कर सकते हैं:

@Component({ 
    selector: 'app', 
    encapsulation: ViewEncapsulation.None, 
    styleUrls: [ 
    './app.component.css', 
    '../../node_modules/bootstrap/dist/css/bootstrap.css' 
    ], 

लेकिन अगर आप अपने vendor.ts को आयात करने में जोर देते हैं तो आप एक नया लोडर स्थापित करना होगा, npm i style-loader --save-dev इस webpack अपने पृष्ठ के लिए सीएसएस इंजेक्षन करने की अनुमति देगा। तो फिर आप अपने webpack.common.js पर, एक विशिष्ट नियम बनाने और बदलने की जरूरत मौजूदा:

{ //this rule will only be used for any vendors 
    test: /\.css$/, 
    loaders: ['style-loader', 'css-loader'], 
    include: [/node_modules/] 
}, 
{ 
    test: /\.css$/, 
    loaders: ['to-string-loader', 'css-loader'], 
    exclude: [/node_modules/] //add this line so we ignore css coming from node_modules 
}, 

एफआईआर नियम ही लागू किया जाएगा जब आप node_modules दूसरा अंदर सीएसएस आयात करने के लिए, किसी भी पैकेज से कोशिश node_modules

Answer 2

के बाहर से आयात किए गए किसी भी सीएसएस पर नियम लागू किया जाएगा शैलियों.css फ़ाइल पर @import '~bootstrap/dist/css/bootstrap.css'; का उपयोग करके यह संभव है। (नोट ~)

Answer 3

तो यहाँ angular-cli जो मैं सबसे अधिक सुविधाजनक को खोजने का उपयोग कर विभिन्न CSS फ़ाइलें आयात करने का तरीका है।

असल में, आप CSS फ़ाइलों को संदर्भित कर सकते हैं (यदि आप उन्हें ओवरराइड कर रहे हैं तो आदेश महत्वपूर्ण है) और angular-cli बाकी का ख्याल रखेगा।

.angular-CLI:

"styles": [ 
    "../node_modules/font-awesome/css/font-awesome.min.css", 
    "../node_modules/primeng/resources/primeng.min.css", 
    "styles.css" 
    ] 

एक नमूना पूर्ण-config इस प्रकार दिखाई देंगे: उदाहरण के लिए, आप के रूप में इस नोड मॉड्यूल है, जो किया जा सकता है से शैलियों की एक जोड़ी शामिल करने के लिए चाहते हो सकता है .json

{ 
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 
    "project": { 
    "name": "my-angular-app" 
    }, 
    "apps": [ 
    { 
     "root": "src", 
     "outDir": "dist", 
     "assets": [ 
     "assets", 
     "favicon.ico" 
     ], 
     "index": "index.html", 
     "main": "main.ts", 
     "polyfills": "polyfills.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.app.json", 
     "testTsconfig": "tsconfig.spec.json", 
     "prefix": "app", 
     "styles": [ 
     "../node_modules/font-awesome/css/font-awesome.min.css", 
     "../node_modules/primeng/resources/primeng.min.css", 
     "styles.css" 
     ], 
     "scripts": [], 
     "environmentSource": "environments/environment.ts", 
     "environments": { 
     "dev": "environments/environment.ts", 
     "prod": "environments/environment.prod.ts" 
     } 
    } 
    ], 
    "e2e": { 
    "protractor": { 
     "config": "./protractor.conf.js" 
    } 
    }, 
    "lint": [ 
    { 
     "project": "src/tsconfig.app.json", 
     "exclude": "**/node_modules/**" 
    }, 
    { 
     "project": "src/tsconfig.spec.json", 
     "exclude": "**/node_modules/**" 
    }, 
    { 
     "project": "e2e/tsconfig.e2e.json", 
     "exclude": "**/node_modules/**" 
    } 
    ], 
    "test": { 
    "karma": { 
     "config": "./karma.conf.js" 
    } 
    }, 
    "defaults": { 
    "styleExt": "scss", 
    "component": {} 
    } 
}