استفاده کردن از پیش پردازنده Less یا Sass در پروژه های Angular CLI

وقتی در حال کار روی یک پروژه بزرگ یا نسبتا بزرگ هستید ترجیح میدید بجای استفاده از زبان CSS از پیش پردازنده هایی مثل Less یا Sass استفاده کنید که بتوانید مدیرت و تمرکز بیشتری روی کدهاتون داشته باشید .

به صورت معمولی شما باید در یک فایل با پسوند پیش پردازنده مورد نظر کدهای استایل خودتون رو بنویسید و بعد Compile کنید به CSS

در صورتی که به صورت عادی بخواید کدنویسی کنید و تمام کدها درون یک فایل باشه مشکل خاصی نیست ولی وقتی میخواید با Angular CLI این کار رو انجام بدید و درگیر Component ها میشید مشکل اصلی ایجاد میشه چون شما باید Style هر Component رو درون همان Component بنویسید و وقتی چشم بر هم میزنید میبینید ده ها Component دارید و ده ها فایل Style و اینجاست که متوجه میشید کار داره سخت میشه و دردسر ساز.

اما راه 2 کلمه ای وجود داره که بتونه شمارو از دست Compile کردن خلاص کنه و همه کار رو Angular به دوش بگیره

راه حل هم این هست وقتی دارید پروژه رو میسازید به صورت زیر نوع Style خودتون رو مشخص کنید .

--style=scss

--style=sass

--style=less

و کد زیر هم به صورت دستور کامل هست

ng new ProjectName --style=scss
 

ng new ProjectName  --style=sass
 

ng new ProjectName  --style=less

اگر بعد از اجرا کردن کد و ساخت پروژه برید فایل های Style رو ببینید متوجه میشید که پسوند فایل ها به پیش پردازنده موند نظر شما تبدیل شده.

موفق باشید .