329

मैं एंगुलर में नया हूं और मैं एम्बर समुदाय से आ रहा हूं। एम्बर-सीएलआई के आधार पर नए कोणीय-सीएलआई का उपयोग करने की कोशिश कर रहा है।

मुझे एक नए कोणीय प्रोजेक्ट में SASS को संभालने का सबसे अच्छा तरीका पता होना चाहिए। मैंने ember-cli-sassयह देखने के लिए रेपो का उपयोग करने की कोशिश की कि क्या यह साथ-साथ खेलेगा क्योंकि एंगर-सीएलआई के कई मुख्य घटक एम्बर-सीएलआई मॉड्यूल से दूर हैं।

यह काम नहीं किया, लेकिन फिर से यकीन है कि अगर मैं अभी कुछ गलत नहीं किया।

इसके अलावा, एक नई कोणीय परियोजना में शैलियों को व्यवस्थित करने का सबसे अच्छा तरीका क्या है? घटक के समान फ़ोल्डर में sass फ़ाइल रखना अच्छा होगा।

angular sass angular-cli

— JDillon522
स्रोत

3

आप यह देख सकते हैं कि इसका उपयोग github.com/angular/material2 में कैसे किया गया है उदाहरण के लिए बटन घटक github.com/angular/material2/tree/master/src/compenders/button

— Günter Zöchbuber

544

कोणीय सीएलआई संस्करण 9 (कोणीय 9 परियोजनाएं बनाने के लिए उपयोग किया जाता है) अब styleइसके बजाय योजनाबद्ध से उठाता है styleext। इस तरह कमांड का उपयोग करें:
ng config schematics.@schematics/angular:component.style scss
और परिणामी कोणीय.जसन इस तरह दिखेगा
"schematics": {
   "@schematics/angular:component": {
      "style": "scss"
    }
  }

अन्य संभावित समाधानों और स्पष्टीकरण:

करने के लिए कोणीय CLI के साथ एक नई परियोजना बनाने सास समर्थन के साथ, इस प्रयास करें:

ng new My_New_Project --style=scss

आप इसका उपयोग भी कर सकते हैं --style=sassऔर यदि आप अंतर नहीं जानते हैं, तो इस छोटे और आसान लेख को पढ़ें और यदि आप अभी भी नहीं जानते हैं, तो बस scssसीखते रहें और सीखते रहें।

यदि आपके पास कोणीय 5 परियोजना है, तो अपनी परियोजना के लिए विन्यास को अद्यतन करने के लिए इस कमांड का उपयोग करें।

ng set defaults.styleExt scss

नवीनतम संस्करणों के लिए

CLI के साथ मौजूदा परियोजना पर नई शैली स्थापित करने के लिए कोणीय 6 के लिए:

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

या सीधे angular.json में:

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

— मर्टन डिकेन
स्रोत

17

फिर आप इसे angular.cli.json से बदल सकते हैं। इस फ़ाइल में "चूक": {"styleExt": "css", "prefixInterfaces": false, "inline": {"style": false, "टेम्पलेट": झूठी} आप स्टाइल बदल सकते हैं

— डिकेन

145

ng set defaults.styleExt scss

— सेबास

4

मत भूलना बदलने के लिए styleसंपत्ति के लिए scssमें.angular-cli.json

— OST

3

ng set defaults.styleExt scss --global

— जोशुआ डेविड

29

मौजूदा परियोजना पर नई शैली स्थापित करने के लिए कोणीय 6 के लिएng config schematics.@schematics/angular:component.styleext scss

— नेहल दमानिया

344

कोणीय 6+ के लिए अद्यतन

नई परियोजनाएं

जब एक नई परियोजना पैदा करने कोणीय CLI के साथ, के रूप में सीएसएस पूर्व प्रोसेसर निर्दिष्ट
- SCSS सिंटैक्स का उपयोग करें
```
ng new sassy-project --style=scss
```
- SASS सिंटैक्स का उपयोग करें
```
ng new sassy-project --style=sass
```
मौजूदा परियोजना को अद्यतन करना

किसी मौजूदा प्रोजेक्ट पर डिफ़ॉल्ट शैली को चलाकर सेट करें
- SCSS सिंटैक्स का उपयोग करें
```
ng config schematics.@schematics/angular:component.styleext scss
```
- SASS सिंटैक्स का उपयोग करें
```
ng config schematics.@schematics/angular:component.styleext sass
```
उपरोक्त कमांड आपके कार्यक्षेत्र फ़ाइल (angular.json) को अपडेट करेगा
```
"schematics": {
    "@schematics/angular:component": {
        "styleext": "scss"
    }
} 
```
जहां styleextया तो किया जा सकता है scssया sassपसंद के अनुसार।

मूल उत्तर (कोणीय <6 के लिए)

नई परियोजनाएं

नई परियोजनाओं के लिए हम विकल्प सेट कर सकते हैं --style=sassया --style=scssइच्छित स्वाद के अनुसार SASS / SCSS

SASS सिंटैक्स का उपयोग करें
```
ng new project --style=sass 
```
SCSS सिंटैक्स का उपयोग करें
```
ng new project --style=scss 
```

फिर स्थापित करें node-sass,

npm install node-sass --save-dev

मौजूदा परियोजनाओं को अद्यतन करना

बनाने के angular-cliसाथ सास फ़ाइलों को संकलित करने node-sass, मैं चलाने के लिए किया था,

npm install node-sass --save-dev

जो स्थापित करता है node-sass। फिर

वाक्यविन्यास के लिए
```
ng set defaults.styleExt sass
```
SCSS सिंटैक्स के लिए
```
ng set defaults.styleExt scss
```

सेट करने के लिए डिफ़ॉल्ट स्टाइल सेट करें

(या)

बदलने styleExtके लिए sassया scssमें वांछित वाक्य रचना के लिए .angular-cli.json,

वाक्यविन्यास के लिए
```
"defaults": {
     "styleExt": "sass",
}
```
SCSS सिंटैक्स के लिए
```
"defaults": {
     "styleExt": "scss",
}
```

हालांकि यह संकलक त्रुटियों को उत्पन्न करता है।

ERROR in multi styles
Module not found: Error: Can't resolve '/home/user/projects/project/src/styles.css' in '/home/user/projects/project'
 @ multi styles

जो की लाइनों को बदलकर तय किया गया था .angular-cli.json,

"styles": [
        "styles.css"
      ],

करने के लिए या तो,

वाक्यविन्यास के लिए
```
"styles": [
        "styles.sass"
      ],
```
SCSS सिंटैक्स के लिए
```
"styles": [
        "styles.scss"
      ],
```

— सभी Іѕ Vаиітy
स्रोत

3

केवल एक चीज जिसने मुझे परेशानी दी angular-cli.jsonवह वास्तव में थी .angular-cli.json। एक बार जब मुझे इसका एहसास हुआ, तो मैंने इसे संपादित किया और यह पूरी तरह से काम कर रहा है। धन्यवाद।

— OldTimeGuitarGuy 18

@OldTimeGuitarGuy इसे इंगित करने के लिए धन्यवाद, एक बार नामित फ़ाइल angular-cli.jsonको छिपी हुई फ़ाइल के रूप में बदल दिया गया ( .angular-cli.json) हाल ही में (rc2)। फिक्स्ड।

— All All Vаиітy

यदि आप एक मौजूदा .cssफ़ाइल का नाम बदल रहे हैं, तो आपको अपने संपादक में इसे बंद करने और इसे फिर से खोलने की आवश्यकता हो सकती है ताकि यह sas सिंटैक्स को ठीक से पहचान सके। यह नवीनतम विज़ुअल स्टूडियो के साथ भी सच है,

— सिमोन_विवर

1

कोणीय 6 नोड-एसएएस के लिए पहले से ही स्थापित है, इसलिए इसे स्थापित करने की कोई आवश्यकता नहीं है।

— नष्ट सब कुछ

1

मेरे पास एक ही सेटअप है, लेकिन सीधे एससीएस फ़ाइलों को घटकों में आयात करना काम नहीं कर रहा है, जबकि उन्हें स्टाइल में आयात करना है। ठीक काम कर रहा है। मैं कोणीय cli verison 7+ का उपयोग कर रहा हूँ, क्या कोई बग है?

— हेमंत संखला

37

अधिकारियों से उद्धृत यहाँ github repo -

उदाहरण के लिए बस एक का उपयोग करने के लिए

npm install node-sass

और अपने प्रोजेक्ट में .css या .sass के लिए .css फ़ाइलों का नाम बदलें। वे स्वचालित रूप से संकलित किए जाएंगे। Angular2App के विकल्प तर्क में sassCompiler, lessCompiler, stylusCompiler और कम्पासकंपाइलर विकल्प हैं जो सीधे उनके संबंधित CSS प्रीप्रोसेसरों को दिए जाते हैं।

यहाँ देखें

https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

— regnar
स्रोत

5

जोड़ना चाह सकते हैं - सेव-देव, निश्चित नहीं कि यह डॉक्स में उस तरह से क्यों नहीं है, लेकिन इसे खो दिया जब हमने एक अपग्रेड किया और फिर यह पता नहीं लगा सके कि हमारी शैली क्यों चली गई

— regnar

2

एक ऐसा मुद्दा था जिसमें प्रमुख अंडरस्कोर वाली sass फाइलें भी संकलित की जा रही थीं, लेकिन यह कोणीय-क्ली के रूप में तय किया गया था 1.0.0-beta.9

— एंडी फोर्ड

यह लिंक बदल गया है: github.com/angular/angular-cli/wiki/stories-css-preprocessors

— martin

26

कोणीय-क्लि को हमेशा डिफ़ॉल्ट रूप से स्कैस का उपयोग करने के लिए कहें

गुजर से बचने के लिए --style scssहर बार जब आप एक परियोजना तैयार करते हैं तो निम्न आदेश के साथ, विश्व स्तर पर कोणीय CLI के अपने डिफ़ॉल्ट कॉन्फ़िगरेशन समायोजित करना चाहें:

ng set --global defaults.styleExt scss

कृपया ध्यान दें कि कोणीय-क्ली के कुछ संस्करणों में उपरोक्त वैश्विक ध्वज ( लिंक देखें ) को पढ़ने के साथ एक बग होता है । यदि आपके संस्करण में यह बग है, तो निम्न के साथ अपनी परियोजना बनाएं:

ng new some_project_name --style=scss

— माइकल पी। बाजोस
स्रोत

मैं angularCLI v। 1.2.1 (नवीनतम, जुलाई 2017 के अनुसार) पर हूं और मेरे पास आपके द्वारा वर्णित बग है। मैंने इस कमांड को चलाया, और यह डिफ़ॉल्ट रूप से नए घटकों के लिए पूरी तरह से काम करने के लिए प्रतीत होता है, लेकिन नई परियोजनाएं अभी भी app.component.css बनाती हैं जब तक कि मैं निर्दिष्ट नहीं करता--style=scss

— जेरेमी मोरिट्ज़

21

जैसे मर्टन ने कहा, scss का उपयोग करने का सबसे अच्छा तरीका है कि उस विकल्प के साथ परियोजना का निर्माण किया जाए:

ng new My_New_Project --style=scss

कमांड का उपयोग करके प्रोजेक्ट बनाये जाने के बाद एंगुलर-क्लि भी डिफ़ॉल्ट सीएसएस प्रीप्रोसेसर को बदलने का विकल्प जोड़ता है:

ng set defaults.styleExt scss

अधिक जानकारी के लिए आप उनके प्रलेखन के लिए यहां देख सकते हैं:

https://github.com/angular/angular-cli

— जारेड वड्सवर्थ
स्रोत

3

ng setappsसरणी में सेटिंग्स पर काम करने के लिए प्रकट नहीं होता है । उदाहरण के लिए। ng set apps.prefix blah"0 पर JSON में अप्रत्याशित टोकन b" फेंकता है।

— im1dermike

15

मैंने देखा कि स्कैस फ़ाइलों को स्थानांतरित करने में एक बहुत ही आकर्षक रास्ता मिल गया !!! एक से एक सरल कदम होना चाहिए: styleUrls: ['app.component.scss']में styleUrls: ['./app.component.scss'](जोड़ें ./)app.component.ts

जब आप एक नया प्रोजेक्ट बनाते हैं तो एनजी होता है, लेकिन डिफ़ॉल्ट प्रोजेक्ट के निर्माण के समय ऐसा प्रतीत नहीं होता है। यदि आप एनजी बिल्ड के दौरान समाधान त्रुटियों को देखते हैं, तो इस समस्या की जांच करें। यह केवल मुझे ~ 1 घंटा लगा।

— JoelParke
स्रोत

3

इस खोज करने के लिए :) बहुत आलसी लोगों के लिए app.component.ts में है

— Embee

5

बेस्ट हो सकता है ng new myApp --style=scss

तब कोणीय सीएलआई आपके लिए scss के साथ कोई भी नया घटक बनाएगा ...

ध्यान दें कि scssब्राउज़र में काम नहीं कर रहा है जैसा कि आप शायद जानते हैं .. इसलिए हमें इसे संकलित करने के लिए कुछ चाहिए css, इस कारण से हम इसका उपयोग कर सकते हैं node-sass, इसे नीचे की तरह स्थापित करें:

npm install node-sass --save-dev

और आप जाने के लिए अच्छा होना चाहिए!

यदि आप वेबपैक का उपयोग कर रहे हैं, तो यहां पढ़ें:

प्रोजेक्ट फ़ोल्डर के अंदर कमांड लाइन जहां आपका मौजूदा पैकेज है। Json है: npm install node-sass sass-loader raw-loader --save-dev

में webpack.common.js, "नियम:" खोजें और नियम सरणी के अंत में इस ऑब्जेक्ट को जोड़ें (पिछली वस्तु के अंत में अल्पविराम जोड़ना न भूलें):

{
  test: /\.scss$/,
  exclude: /node_modules/,
  loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
}

फिर अपने घटक में:

@Component({
  styleUrls: ['./filename.scss'],
})

यदि आप वैश्विक CSS समर्थन चाहते हैं तो शीर्ष स्तर के घटक पर (संभावना app.component.ts) एन्कैप्सुलेशन को हटा दें और SCSS को शामिल करें:

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

@Component({
  selector: 'app',
  styleUrls: ['./bootstrap.scss'],
  encapsulation: ViewEncapsulation.None,
  template: ``
})
class App {}

कोणीय स्टार्टर से यहाँ ।

— एलिरेज़ा
स्रोत

5

ng set --global defaults.styleExt=scssng6 से हटा दिया गया है। आपको यह संदेश मिलेगा:

प्राप्त / सेट को कॉन्फ़िगर कमांड के पक्ष में हटा दिया गया है

आपको उपयोग करना चाहिए:

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

यदि आप किसी विशिष्ट प्रोजेक्ट ({प्रोजेक्ट} को अपने प्रोजेक्ट के नाम से बदलें) को लक्षित करना चाहते हैं:

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

— aloisdg codidact.com पर जा रहा है
स्रोत

से संबंधित कोई config पाया या प्राप्त / सेट कोणीय 6 में पदावनत किया गया है

— codidact.com में जाने aloisdg

3

कोणीय-सीएलआई अनुशंसित विधि है और कोणीय 2+ समुदाय में मानक है।

SCSS के साथ एक नया प्रोजेक्ट क्रेट करें

ng new My-New-Project --style=sass

एक मौजूदा परियोजना को परिवर्तित करें (v6 से कम CLI)

ng set defaults.styleExt scss

(इस दृष्टिकोण के साथ सभी .css फ़ाइलों को मैन्युअल रूप से नाम बदलना चाहिए, अपनी घटक फ़ाइलों में नाम बदलना न भूलें)

किसी मौजूदा प्रोजेक्ट को परिवर्तित करें (v6 से अधिक CLI)

सभी CSS फाइलों को SCSS में बदलें और उन घटकों को अपडेट करें जो उनका संदर्भ देते हैं।
कोणीय.जॉन की "स्कीमैटिक्स" कुंजी में निम्नलिखित जोड़ें (आमतौर पर लाइन 11):

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

— Edodso2
स्रोत

3

के लिए कोणीय 9.0 और इसके बाद के संस्करण, अद्यतन "schematics":{}में वस्तु angular.json इस तरह फ़ाइल:

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

— Mahozad
स्रोत

धन्यवाद, मैं सोच रहा था कि यह काम क्यों नहीं किया और यह पता चला है कि वे इसे styleअब नाम दिया गया है

— डिनो

2

निम्नलिखित को कोणीय सीएलआई 6 परियोजना में काम करना चाहिए। यानी अगर आपको मिल रहा है:

प्राप्त / सेट को कॉन्फ़िगर कमांड के पक्ष में हटा दिया गया है।

npm install node-sass --save-dev

तब ( सुनिश्चित करें कि आप परियोजना का नाम बदल देंगे )

ng config projects.YourPorjectName.schematics.@schematics/angular:component.styleext sass

अपने डिफ़ॉल्ट प्रोजेक्ट नाम का उपयोग करने के लिए:

ng config defaultProject

हालाँकि: यदि आपने अपने प्रोजेक्ट को <6 से कोणीय 6 तक माइग्रेट किया है, तो एक अच्छा मौका है कि कॉन्फिगरेशन न हो। किस मामले में आपको मिल सकता है:

अमान्य JSON वर्ण: "s" पर 0: 0

इसलिए एक मैनुअल संपादन की angular.jsonआवश्यकता होगी।

आप इसे कुछ इस तरह देखना चाहेंगे (स्टाइलेक्स प्रॉपर्टी पर ध्यान दें):

...
"projects": {
    "Sassy": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      }
...

मेरे लिए एक अति जटिल स्कीमा की तरह लगता है। _ (ツ) _ / ¯

अब आपको अपने सभी सीएसएस / कम फ़ाइलों को बदलने और स्कैस होने के लिए बदलना होगा और घटकों आदि में किसी भी संदर्भ को अपडेट करना होगा, लेकिन आपको जाना अच्छा होना चाहिए।

— नील वॉटसन
स्रोत

2

3/10/2019 तक, अंगुर ने सास का समर्थन छोड़ दिया। कोई मेटर नहीं है कि आप --styleरनिंग करते समय किस विकल्प से गुजरे ng new, आपको हमेशा .scssफाइल जनरेट होती है। यह शर्म की बात है कि बिना किसी स्पष्टीकरण के सैस समर्थन को गिरा दिया गया।

— बस एक सीखने वाला
स्रोत

1

3/10/2019 के बाद इससे जूझने वाले किसी भी व्यक्ति के लिए: 8.0.0-बीटा.5 में कोणीय -क्ली के लिए कोणीय पुन: प्रस्तुत सपोर्ट सपोर्ट करता है और इसे जल्द ही मुख्य रिलीज शाखा में वापस होना चाहिए। आप रिलीज के साथ स्थापित कर सकते हैंnpm install -g @angular/cli@8.0.0-beta.5

— mkrl

दिलचस्प। याद दिलाने के लिए धन्यवाद। जिज्ञासा से बाहर, क्या आपको पता है कि वे पहले स्थान पर समर्थन क्यों छोड़ते हैं?

— बस एक शिक्षार्थी

जाहिर तौर पर कोणीय टीम इसे "अब प्रासंगिक नहीं" वाक्यविन्यास के रूप में संदर्भित कर रही थी, कम से कम कोर टीम के सदस्य द्वारा इस पीआर में जो कहा गया था , इस पर कोई और जानकारी नहीं मिल सकी।

— mkrl

1

इसे Global Default के रूप में सेट करें

ng set defaults.styleExt=scss --global

— सजथ मंथरथ
स्रोत

0

सीएसएस प्रीप्रोसेसर एकीकरण कोणीय सीएलआई सभी प्रमुख सीएसएस प्रीप्रोसेसर का समर्थन करता है:

इन प्रीप्रोसेसरों का उपयोग करने के लिए बस फ़ाइल को अपने कंपोनेंट के स्टाइल में जोड़ें:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app works!';
}

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

ng new sassy-project --style=sass

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

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

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

@ Component.styles सरणी में जोड़े गए स्टाइल स्ट्रिंग्स को CSS में लिखा जाना चाहिए क्योंकि CLI इन-लाइन शैलियों में प्री-प्रोसेसर लागू नहीं कर सकता है।

कोणीय प्रलेखन के आधार पर https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

— विक्टर ह्यूगो अरंगो ए।
स्रोत

0

मैंने इस कमांड का उपयोग करके अपने प्रोजेक्ट को अपडेट करने की कोशिश की

एनजी सेट defaults.styleExt scss

लेकिन यह मिल गया

प्राप्त / सेट को कॉन्फ़िगर कमांड के पक्ष में हटा दिया गया है।

कोणीय सीएलआई: 6.0.7
नोड: 8.9.0
OS: linux x64
कोणीय: 6.0.3

इसलिए मैंने अपना प्रोजेक्ट हटा दिया (जैसा कि मैं अभी शुरू कर रहा था और मेरे प्रोजेक्ट में कोई कोड नहीं था) और शुरू में सेट के साथ एक नया बनाया

एनजी न्यू माय-ससी-ऐप --स्टाइल = एससीएस

लेकिन मैं सराहना करता हूं कि अगर कोई मौजूदा परियोजना को अपडेट करने का तरीका साझा कर सकता है तो यह अच्छा होगा।

— जुनैद
स्रोत

किसी ने इसका जवाब मौजूदा Angular 6 प्रोजेक्ट्स के लिए दिया है

— पैडिगन

0

चरण 1। एनपीएम का उपयोग करके बुलमा पैकेज स्थापित करें

npm install --save bulma

चरण 2। कोणीय.जॉन खोलें और निम्नलिखित कोड को अपडेट करें

...
 "styles": [
 "node_modules/bulma/css/bulma.css",
 "src/styles.scss"
 ],
...

बस।

बुल्मा के औजारों को आसानी से उजागर करने के लिए, stylePreprocessorOptions को angular.json में जोड़ें।

...
 "styles": [
 "src/styles.scss",
 "node_modules/bulma/css/bulma.css"
  ],
 "stylePreprocessorOptions": {
 "includePaths": [
    "node_modules",
    "node_modules/bulma/sass/utilities"
 ]
},
...

BULMA + ANGULAR 6

— बाला
स्रोत

यह कोणीय मानक से पूरी तरह से दूर है, और scss का उपयोग केवल bulma का उपयोग करने का एक माध्यमिक प्रभाव है

— netalex

कोणीय CLI SASS विकल्प

कोणीय 6+ के लिए अद्यतन

नई परियोजनाएं

मौजूदा परियोजना को अद्यतन करना

मूल उत्तर (कोणीय <6 के लिए)

नई परियोजनाएं

मौजूदा परियोजनाओं को अद्यतन करना

कोणीय-क्लि को हमेशा डिफ़ॉल्ट रूप से स्कैस का उपयोग करने के लिए कहें

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