সিএসএস থেকে এসএসএস পর্যন্ত কৌণিক-ক্লিপ

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আপনি এটি কি পরিবর্তন হয়েছে দেখতে হবে।

— jonrsharpe

তবে আমি এখনও কোনও ফাইল নেই। শুধু স্যুইচ করতে চান।

— জেমি

আপনার কাছে এখনও কোন ফাইল নেই? আপনি যদি একটি নতুন প্রকল্প তৈরি করে থাকেন তবে আপনি কেন সেভাবে কনফিগার করছেন?

— jonrsharpe

শুধু কৌণিক 2 দিয়ে শুরু। আমি সব খুঁজে বের করার চেষ্টা করছি।

— জ্যামি

আপনি যদি একটি নতুন প্রকল্প তৈরি করে ng new whatever --style=scss থাকেন তবে ডক্সে যেমন দেখায় তেমন করুন । আপনি যদি যা করছেন তা যদি না হয় তবে কোনও বিদ্যমান প্রকল্পটি কনফিগার করার নির্দেশাবলী অনুসরণ করবেন না!

— jonrsharpe

Answer 1

কৌণিক 6 এর জন্য অফিসিয়াল ডকুমেন্টেশন পরীক্ষা করুন

নোট: জন্য @angular/cliচেয়ে পুরোনো সংস্করণগুলি 6.0.0-beta.6ব্যবহার ng setস্থানে ng 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

(* উত্স: কৌনিক সিএলআই এসএএসএস বিকল্পসমূহ )

2. আপনার বিদ্যমান .cssফাইলগুলিতে .scss(যেমন স্টাইলস.এসএসএস এবং অ্যাপ্লিকেশন / অ্যাপ ডটকমপিটেনসিএসএসএস) নতুন নাম দিন

3. স্টাইলসএসএসএস-এর সন্ধানের জন্য সিআইএলিকে নির্দেশ করুন

ফাইল এক্সটেনশানগুলি ম্যানুয়ালি ইন apps[0].stylesইন পরিবর্তন করুনangular.json

4. আপনার নতুন স্টাইলের ফাইলগুলি খুঁজতে উপাদানগুলিকে নির্দেশ করুন

styleUrlsআপনার নতুন ফাইলের নামের সাথে মেলে আপনার উপাদানগুলিতে পরিবর্তন করুন

ভবিষ্যতের প্রকল্পের জন্য

@ সার্গিনহো যেমন উল্লেখ করেছেন তেমন ng newকমান্ড চালানোর সময় আপনি স্টাইল এক্সটেনশন সেট করতে পারেন

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

আপনি যদি ভবিষ্যতে তৈরি সমস্ত প্রকল্পের জন্য ডিফল্ট সেট করতে চান তবে নিম্নলিখিত কমান্ডটি চালান:

ng config --global defaults.styleExt=scss

Comments

সম্পাদনা: আমার কেবল রিয়েল-টাইম বিল্ডারকে রিফ্রেশ করার দরকার ছিল। এটি সঠিকভাবে কাজ করে

— ক্রিশ্চিয়ান ট্র্যানা

@ কৌণিক / CLI 1.7.3 থেকে defaults.styleExt পরিবর্তন cssকরতে scssমধ্যে .angular-cli.jsonস্বয়ংক্রিয়ভাবে ভবিষ্যতে উত্পন্ন প্রতিটি নতুন উপাদান জন্য SCSS ফাইল তৈরি হবে।

— সাইমনহাউইজিং

বিদ্যমান প্রকল্পগুলির জন্য এনজি সেট ডিফল্টস

— স্টাইলএক্সটিএসএসএসএস

কৌনিক 6 এর জন্য এই github.com/angular/angular-cli/wiki/stories-css-preprocessors

— hamilton.lima

@ কেভিনে সর্বশেষ কৌণিক ক্লাইনের সংস্করণটির জন্য আমার ক্ষেত্রে (.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

@ এমচেএ, হ্যাঁ আমার সেটআপটিও তেমনি চলছে এবং এটি কাজ করছে।

— এরিক সোইকে 30'18

আমি প্রকল্পের ভিতরে আমার বাসা বেঁধে রেখেছি এবং দেখে মনে হচ্ছে এটি খুব ভাল কাজ করছে, ঠিক একই প্রশ্নে যে কারও জন্য একটি এফওয়াইআই হিসাবে।

— mcheah

এনজি 6 সর্বশেষ সংস্করণে আপডেট করার পরে আমার schematicsএখন পাশাপাশি বাসা বেধে আছে ।

— জোসে ওরিহুয়েলা

এটা আমার জন্য কিছু পরিবর্তন বলে মনে হচ্ছে না। তবুও .css ফাইলগুলিতে স্কেস বিধিগুলি প্রক্রিয়া করা হচ্ছে না।

— চবি

Answer 3

কৌনিক.জসন ফাইল খুলুন

থেকে পরিবর্তন

"schematics": {}

প্রতি

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

2. (দুটি জায়গায়) থেকে পরিবর্তন করুন

"src/styles.css"

প্রতি

"src/styles.scss"

তারপরে সমস্ত .cssফাইল চেক করুন এবং নাম পরিবর্তন করুন এবং এর থেকে উপাদান.ts ফাইলের স্টাইল ইউআরএল আপডেট করুন.css to .scss

Comments

পদক্ষেপ 1 সিএলআই থেকে করা যেতে পারে: ng config schematics.@schematics/angular:component.styleext scss অফিসিয়াল ডক্সে

— 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নতুন নামের সম্পত্তি। ... তাহলে এটি দুর্দান্ত কাজ করে!

— gkl

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

এনজি 6-তে আপনাকে অনুরূপ পোস্ট অনুসারে এই কমান্ডটি ব্যবহার করতে হবে :

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

Answer 9

এই থ্রেড জুড়ে আসা এনআরওয়াল এক্সটেনশনের ব্যবহারকারীদের জন্য : সমস্ত কমান্ডগুলি এনএক্স (যেমন, ng generate component myCompent) দ্বারা বিরত থাকে এবং তারপরে অ্যাংুলারসিএলআইতে চলে যায়।

কোনও এনএক্স ওয়ার্ক স্পেসে এসসিএসএসকে কাজ করার জন্য আদেশ:

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

Comments

উজ্জ্বল, এটি খুঁজছিলেন। ধন্যবাদ!

— রুয়ান পিটারসেন

Answer 10

একটি নিষ্ঠুর শক্তি পরিবর্তন প্রয়োগ করা যেতে পারে। এটি পরিবর্তন করতে কাজ করবে, তবে এটি দীর্ঘতর প্রক্রিয়া।

অ্যাপ্লিকেশন ফোল্ডারে src / app এ যান

1. এই ফাইলটি খুলুন: app.componal.ts

2. এই কোড পরিবর্তন styleUrls: ['./app.component.css']করতেstyleUrls: ['./app.component.scss']

3. সংরক্ষণ করেন এবং বন্ধ করেন.

একই ফোল্ডারে src / app /

1. (.Com.componal.scss) এ app.componal.css ফাইলের জন্য এক্সটেনশনটির নাম পরিবর্তন করুন

2. অন্যান্য সমস্ত উপাদানগুলির জন্য এই পরিবর্তনটি অনুসরণ করুন। (উদাঃ হোম, প্রায়, যোগাযোগ, ইত্যাদি ...)

Angular.json কনফিগারেশন ফাইল পরবর্তী। এটি প্রকল্পের মূলে অবস্থিত।

1. CSS সন্ধান করুন এবং প্রতিস্থাপন করুন এটি (এসএসএস) এ পরিবর্তন করুন ।

2. সংরক্ষণ করেন এবং বন্ধ করেন.

শেষ অবধি, আপনার পুনরায় চালু করুন ng serve -o।

যদি সংকলক আপনার কাছে অভিযোগ করে তবে আবার ধাপে এগিয়ে যান।

অ্যাপ / এসসিআর- র পদক্ষেপগুলি নিবিড়ভাবে অনুসরণ করতে ভুলবেন না ।

Answer 11

কৌণিক (v9) এর সর্বশেষ সংস্করণে নীচে কোড যুক্ত করা দরকার angular.json

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

নিম্নলিখিত কমান্ড ব্যবহার করে যুক্ত করা যেতে পারে:

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

Comments

আমার জন্য কাজ করছে না এবং আমি এটির চেষ্টা করছি 10

— ক্রস