2017-03-01 8 views
12

Angular CLI के साथ निर्मित एक कोणीय 2 ऐप पर, मैंने official installation guide के बाद Angular 2 Material components सेट अप किया है।कोणीय सामग्री 2 सीएसएस आयात आदेश कैसे बदलें?

कोणीय 2 सामग्री <head> से नीचे मेरी कस्टम सीएसएस शैलियों में अपनी मुख्य सीएसएस शैलियों को रख रहा है। जो मुझे अपने पक्ष में प्रभाव डालता है अगर मुझे उन्हें ओवरराइड करने की आवश्यकता है।

मैं अपने कोणीय सीएलआई मुख्य (एंट्री) सीएसएस फ़ाइल के अंदर परिभाषित शैलियों को से ऊपर अपनी कोर सीएसएस शैलियों से ऊपर रखने के लिए कोणीय 2 सामग्री को कैसे मजबूर कर सकता हूं?

enter image description here

+0

क्या आप दिखा सकते हैं कि आपने .angular.cli.json, शैलियों सरणी में लिंक कैसे रखा है? –

+0

मैंने प्रविष्टि (मुख्य) ऐप 'शैलियों.scss' को छोड़कर, मेरे 'कोणीय-cli.json' में कोई अन्य स्टाइलशीट नहीं रखी है। एंगुलर 2 सामग्री जैसे ही मैं इसे अपने 'app.module.ts' में आयात करता हूं, इसे स्वचालित रूप से कोर सीएसएस इंजेक्ट करता है। –

+0

इसके लिए उत्तर देखने के लिए उत्सुक।यह एक आदर्श है कि लिंक किए गए शैलियों को क्लि एप्लिकेशन में शीर्ष पर जोड़ा जाता है और फिर यह घटकों और मॉड्यूल की आवश्यक शैलियों को जोड़ता है। इसके अलावा, जानना उत्सुक है कि आप ऐसा क्यों करना चाहते हैं? –

उत्तर

0

मुझे लगता है कि इस मुद्दे को आप कर रहे हैं index.html में अपने सीएसएस फ़ाइलों के लिए कुछ संदर्भों होने और कोणीय-cli.json फ़ाइल में अन्य लोगों के होने के कारण है।

नीचे मेरी angular.cli json फ़ाइल और index.html का एक उदाहरण है

enter image description here

enter image description here

तुम जो भी index.html में परिभाषित किया है कि तुम क्या परिभाषित किया है से पहले आने के लिए जा रहा है कोणीय-cli.json फ़ाइल में। यदि आप उन्हें पुन: व्यवस्थित करना चाहते हैं, तो कोणीय-cli.json फ़ाइल में सभी सीएसएस फ़ाइलों के संदर्भ शामिल करें।

ध्यान दें कि मेरी style.css फ़ाइल कोणीय-cli.json फ़ाइल में सूचीबद्ध अंतिम चीज़ है।


संपादित करें (मूल प्रश्न फिर से फिर से पढाना के बाद)

मैं तुम्हें अपने स्वयं के कस्टम विषय बनाने और इसे आयात करने की आवश्यकता है।

प्रति कोणीय सामग्री के दस्तावेज़

आदेश कोणीय सामग्री के टूलींग के साथ अपने स्वयं घटकों शैली में, घटक की शैलियों सास के साथ परिभाषित किया जाना चाहिए।

आपको बस कस्टम घटक-theme.scss में एक @mixin समारोह बनाने के लिए है

Theming your Own Components और उनके Theming Guide

0

style.css फ़ाइल में आयात सामग्री विषय पर देखें कोणीय सामग्री के दस्तावेज़ रूट पर:

उदाहरण

@import "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css"; 

आप इंडिगो-pink.css को अपनी पसंद के अनुसार बदल सकते हैं।

संबंधित मुद्दे