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




angular-cli (10)

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

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

    कोणीय सीएलआई के साथ एक नई परियोजना बनाते समय, सीएसएस पूर्व-प्रोसेसर को निर्दिष्ट करें

    • SCSS सिंटैक्स का उपयोग करें

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

      ng new sassy-project --style=sass
      
  2. मौजूदा परियोजना को अद्यतन करना

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

    • SCSS सिंटैक्स का उपयोग करें

      ng config [email protected]/angular:component.styleext scss
      
    • SASS सिंटैक्स का उपयोग करें

      ng config [email protected]/angular:component.styleext sass
      

    उपरोक्त कमांड आपके कार्यक्षेत्र फ़ाइल (angular.json) को अपडेट करेगा

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

    जहां styleext पसंद के अनुसार या तो styleext या sass हो सकता है।



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

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

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

  • SASS सिंटैक्स का उपयोग करें

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

    ng new project --style=scss 
    

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

npm install node-sass --save-dev

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

node-sass साथ सैस फ़ाइलों को संकलित करने के लिए angular-cli बनाने के लिए, मुझे दौड़ना पड़ा,

npm install node-sass --save-dev 

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

  • वाक्यविन्यास के लिए

    ng set defaults.styleExt sass
    
  • SCSS सिंटैक्स के लिए

    ng set defaults.styleExt scss
    

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

(या)

styleExt को बदलने के लिए sass या वांछित सिंटैक्स में .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"
          ],
    

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

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

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

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


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

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

ng set --global defaults.styleExt scss


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

ng new some_project_name --style=scss

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

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

npm install node-sass

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

यहाँ देखें


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

ng set defaults.styleExt=scss --global


चरण 1। Npm का उपयोग करके bulma पैकेज स्थापित करें

npm install --save bulma

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

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

बस।

बुल्मा के औजारों को आसानी से उजागर करने के लिए, शैलीप्रक्रियाओं को कोणीय.जोन में जोड़ें।

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

BULMA + ANGULAR 6


जब आप कोणीय क्ली के साथ अपना प्रोजेक्ट बना रहे हैं, तो यह कोशिश करें:

ng new My_New_Project --style=sass 

यह आपके सभी घटकों को पूर्वनिर्धारित sass फ़ाइलों के साथ उत्पन्न करता है।

यदि आप चाहते हैं कि scss सिंटैक्स आपके साथ अपनी परियोजना बनाएँ:

ng new My_New_Project --style=scss

यदि आप अपनी परियोजना में अपनी मौजूदा शैली बदल रहे हैं

ng set defaults.styleExt scss

Cli इसके बाकी हिस्सों को संभालती है।

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

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

ng config [email protected]/angular:component.styleext scss

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

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

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

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

npm install node-sass --save-dev

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

ng config [email protected]/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"
        }
      }
...

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

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


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

एनजी सेट defaults.styleExt scss

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

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

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

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

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

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


सर्वश्रेष्ठ ng new myApp --style=scss हो सकता है

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

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

npm install node-sass --save-dev

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

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

प्रोजेक्ट फ़ोल्डर के अंदर कमांड लाइन जहाँ आपका मौजूदा पैकेज है। 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 {}

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


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

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

@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 [email protected]/angular:component.styleext scss

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

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

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





angular-cli