एंगुलर-क्ली सीएसएस से एससीएस तक

Question

मैंने डॉक्यूमेंटेशन पढ़ा है , जो कहता है कि अगर मुझे इस्तेमाल करना है तो मुझे scssनिम्न कमांड को चलाना होगा:

ng set defaults.styleExt scss

लेकिन जब मैं ऐसा करता हूं और वह फाइल बनाता हूं, तब भी मुझे अपने कंसोल में यह त्रुटि मिलती है:

styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT:
no such file or directory, open
'/Users/Egen/Code/angular/src/styles.css'(…)

Comments

यह केवल उस बिंदु से उत्पन्न फ़ाइलों के लिए काम करेगा, मुझे नहीं लगता कि यह उन लोगों को ठीक करेगा जो आपके पास पहले से हैं। यदि आप git diffदेखेंगे कि यह क्या बदल गया है।

— जॉन्सर्शपे

लेकिन अभी तक मेरी कोई फाइल नहीं है। बस स्विच करना चाहते हैं।

— जेमी

आपके पास अभी तक कोई फ़ाइल कैसे नहीं है? यदि आप एक नया प्रोजेक्ट बना रहे हैं, तो आप इसे इस तरह से क्यों कॉन्फ़िगर कर रहे हैं?

— जोनरशेप

बस कोणीय 2 से शुरू करना। मैं यह जानने की कोशिश कर रहा हूं।

— जेमी

यदि आप एक नया प्रोजेक्ट बना रहे हैं, तो ng new whatever --style=scss डॉक्स में दिखाए अनुसार करें । मौजूदा परियोजना को कॉन्फ़िगर करने के निर्देशों का पालन न करें यदि आप ऐसा नहीं कर रहे हैं!

— जॉन्सर्शपे

Answer 1

कोणीय 6 के लिए आधिकारिक दस्तावेज देखें

नोट: इसके स्थान पर उपयोग @angular/cliसे पुराने संस्करणों के लिए ।6.0.0-beta.6ng setng config

मौजूदा परियोजनाओं के लिए

एक मौजूदा कोणीय-क्ली परियोजना में जो डिफ़ॉल्ट cssशैलियों के साथ स्थापित की गई थी, आपको कुछ चीजें करने की आवश्यकता होगी:

1. डिफ़ॉल्ट शैली एक्सटेंशन को इसमें बदलें scss

मैन्युअल रूप से .angular-cli.json(कोणीय 5.x और पुराने) में परिवर्तन याangular.json (कोणीय 6+) या चलाएं:

ng config defaults.styleExt=scss

यदि आपको कोई त्रुटि मिलती है: Value cannot be found.कमांड का उपयोग करें:

ng config schematics.@schematics/angular:component.styleext scss

(* स्रोत: कोणीय CLI SASS विकल्प )

2. अपने मौजूदा का नाम बदलें .css फ़ाइलों का.scss (यानी स्टाइल.एससीएस और ऐप / ऐप.कॉमपेंटेंट.केएस)

3. शैलियों को खोजने के लिए CLI को इंगित करें

फ़ाइल एक्सटेंशन को मैन्युअल रूप से बदलें apps[0].styles मेंangular.json

4. अपनी नई शैली फ़ाइलों को खोजने के लिए घटकों को इंगित करें

बदलाव styleUrlsअपने नए फ़ाइल नामों से मिलान करने के लिए अपने घटकों में

भविष्य की परियोजनाओं के लिए

जैसा कि @Serginho ने बताया कि ng newकमांड चलाते समय आप स्टाइल एक्सटेंशन सेट कर सकते हैं

ng new your-project-name --style=scss

यदि आप भविष्य में बनाने वाली सभी परियोजनाओं के लिए डिफ़ॉल्ट सेट करना चाहते हैं, तो निम्न कमांड चलाएं:

ng config --global defaults.styleExt=scss

Comments

संपादित करें: मैं सिर्फ वास्तविक समय बिल्डर ताज़ा करने के लिए की जरूरत है। यह सही ढंग से काम करता है

— क्रिस्टियान Traìna

@ कोणीय / CLI 1.7.3: से defaults.styleExt बदलते cssकरने scssमें .angular-cli.jsonस्वचालित रूप से भविष्य में उत्पन्न हर नए घटक के लिए एससीएसएस फ़ाइलों का निर्माण करेगा।

— सिमोनहॉवर्स

एनजी मौजूदा परियोजनाओं के लिए defaults.styleExt एससीएसएस सेट

— smedasn

कोणीय 6 के लिए इस github.com/angular/angular-cli/wiki/stories-css-preprocessors

— hamilton.lima

@chovy नवीनतम कोणीय क्ली संस्करण के लिए, मेरे मामले में (6.0.7) मौजूदा परियोजनाओं के लिए इस कमांड का उपयोग करें: ng config schematics.@schematics/angular:component.styleext scss जैसा कि @ हैमिल्टन.लिमा द्वारा बताया गया है

— फरहान

Answer 2

एनजी 6 के रूप में इसे angular.jsonमूल स्तर पर जोड़े गए निम्नलिखित कोड के साथ पूरा किया जा सकता है:

मैन्युअल रूप से इसमें परिवर्तन करें .angular.json:

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
}

Comments

मैं schematicsजड़ स्तर पर नहीं, लेकिन अपने प्रोजेक्ट के अंदर नेस्टेड हूं angular.json। क्या मुझे इसे अनदेखा करना चाहिए और इसके बजाय मूल स्तर पर जोड़ना चाहिए?

— mcheah

@ हाँ, हाँ, यह है कि कैसे मेरा सेटअप के रूप में अच्छी तरह से है, और यह काम कर रहा है।

— एरिक सोयके ने

मैंने प्रोजेक्ट के अंदर अपना नेस्टेड छोड़ दिया और ऐसा लग रहा है कि यह ठीक भी काम कर रहा है, जैसे कि किसी के लिए भी FYI करना एक ही सवाल है।

— mcheah

Ng6 के नवीनतम संस्करणों में अपडेट करने के बाद schematicsअब मेरा भी नेस्टेड है।

— जोस ओरहुएला

यह मेरे लिए कुछ भी बदलने के लिए प्रतीत नहीं होता है। अभी भी .css फ़ाइलों में नियमों को संसाधित नहीं किया जा रहा है।

— चोवी

Answer 3

कोणीय फ़ाइल खोलें

1. से बदलें

"schematics": {}

सेवा

"schematics": {
           "@schematics/angular:component": {
                   "styleext": "scss"       
             }  
  }

2. (दो स्थानों पर) से परिवर्तन

"src/styles.css"

सेवा

"src/styles.scss"

फिर सभी .cssफ़ाइलों को जांचें और उनका नाम बदलें.css to .scss

Comments

चरण 1 सीएलआई से किया जा सकता है: ng config schematics.@schematics/angular:component.styleext scss जैसा कि आधिकारिक डॉक्स में निर्दिष्ट किया गया है: github.com/angular/angular-cli/wiki/stories-css-preprocessors

— Marian07

Answer 4

कोणीय 6 के लिए,

ng config schematics.@schematics/angular:component.styleext scss

नोट: @ योजनाबद्ध / कोणीय कोणीय सीएलआई के लिए डिफ़ॉल्ट योजनाबद्ध है

Answer 5

एंगुलर सीएलआई के लिए सीएसएस प्रीप्रोसेसर एकीकरण: 6.0.3

एक नई परियोजना बनाते समय आप यह भी परिभाषित कर सकते हैं कि आपको शैली फ़ाइलों के लिए कौन सा एक्सटेंशन चाहिए:

ng new sassy-project --style=sass

या किसी मौजूदा प्रोजेक्ट पर डिफ़ॉल्ट शैली सेट करें:

ng config schematics.@schematics/angular:component.styleext scss

सभी प्रमुख सीएसएस प्रीप्रोसेसर के लिए कोणीय सीएलआई प्रलेखन

Comments

Invalid JSON character: "s" at 0:0.

— चोवी

कोणीय CLI 6.0.8 के रूप में ng config(ऊपर) के रूप में सबसे अच्छा तरीका है, लेकिन आप अभी भी नाम बदलने की आवश्यकता *.cssकरने के लिए फ़ाइलों *.scssऔर में संदर्भ प्रतिस्थापित angular.jsonकरने style.cssके साथ style.scssऔर अद्यतन में सभी घटक फ़ाइल संदर्भ styleUrlsनए नाम के लिए संपत्ति। ... तो बढ़िया काम करता है!

— गक्कल

Answer 6

मौजूदा परियोजनाओं के लिए :

में angular.jsonफ़ाइल

1. में buildहिस्सा और में testहिस्सा है, की जगह:

   "styles": ["src/styles.css"], द्वारा "styles": ["src/styles.scss"],

2. बदलने के:

   "schematics": {}, द्वारा "schematics": { "@schematics/angular:component": { "style": "scss" } },

ng config schematics.@schematics/angular:component.styleext scssकमांड कार्यों का उपयोग करना लेकिन यह कॉन्फ़िगरेशन को एक ही स्थान पर नहीं रखता है।

अपनी परियोजना में अपनी .cssफ़ाइलों का नाम बदलें.scss

एक नए प्रोजेक्ट के लिए , यह कमांड सभी काम करता है:

ng n project-name --style=scss

वैश्विक विन्यास के लिए

लगता है कि नए संस्करणों में वैश्विक कमांड नहीं है

Answer 7

कमांड का उपयोग करें:

ng config schematics.@schematics/angular:component.styleext scss

Answer 8

Ng6 में आपको एक समान पोस्ट के अनुसार इस कमांड का उपयोग करने की आवश्यकता है :

ng config schematics.@schematics/angular:component '{ styleext: "scss"}'

Answer 9

Nrwl एक्सटेंशन के उपयोगकर्ताओं के लिए जो इस थ्रेड में आते हैं: सभी कमांड Nx (जैसे ng generate component myCompent) द्वारा इंटरसेप्ट किए जाते हैं और फिर AngularCLI को पास कर दिए जाते हैं।

NSS कार्यक्षेत्र में SCSS काम करने की आज्ञा:

ng config schematics.@nrwl/schematics:component.styleext scss

Comments

शानदार, यह देख रहा था। धन्यवाद!

— रुआन पीटर्सन

Answer 10

एक जानवर बल परिवर्तन लागू किया जा सकता है। यह बदलने के लिए काम करेगा, लेकिन यह एक लंबी प्रक्रिया है।

ऐप फ़ोल्डर src / ऐप पर जाएं

1. इस फाइल को खोलें: app.component.ts

2. इस कोड styleUrls: ['./app.component.css']को बदलेंstyleUrls: ['./app.component.scss']

3. सहेजें और बंद करें।

एक ही फ़ोल्डर में src / app

1. App.component.css फ़ाइल के लिए एक्सटेंशन का नाम बदलें (app.component.scss)

2. अन्य सभी घटकों के लिए इस परिवर्तन का पालन करें। (उदा। घर, के बारे में, संपर्क, आदि ...)

Angular.json विन्यास फाइल बगल में है। यह प्रोजेक्ट रूट पर स्थित है।

1. खोज और बदलें सीएसएस इसे (scss) में बदलें ।

2. सहेजें और बंद करें।

अंत में, अपने पुनरारंभ करें ng serve -o।

यदि कंपाइलर आपसे शिकायत करता है, तो फिर से कदम बढ़ाएं।

एप्लिकेशन / src में दिए गए चरणों का बारीकी से पालन करना सुनिश्चित करें ।

Answer 11

कोणीय के नवीनतम संस्करण (v9) में, नीचे दिए गए कोड को जोड़ना होगा angular.json

  "schematics": {
    "@schematics/angular:component": {
      "style": "scss"
    }
  }

निम्नलिखित कमांड का उपयोग करके जोड़ा जा सकता है:

ng config schematics.@schematics/angular:component.style scss

Comments

मेरे लिए काम नहीं कर रहा है और मैं इसे 10 से अधिक करने की कोशिश कर रहा हूँ

— Kross