استفاده از Sass در پروژه‌های React

اضافه کردن Sass یکی از اولین کارهایی هستش که توسعه دهندگان هنگام شروع پروژه انجام میدن. با CSS هم میشه استایل داد ولی Sass خیلی قابلیت‌ها به ما میده. از جمله:

• متغیرها (variables)
• تودرتو (nesting)
• عملیات ریاضی (math)
• میکسین‌ها (mixins)
• توابع (functions)
• ایمپورت (import)
• و ...

مراحل اضافه کردن Sass

1. نصب کردن node-sass
2. تبدیل پسوندهای .css به .scss
3. ایمپورت کردن فایل sass به کامپوننت های React

1. نصب کردن node-sass

گام اول نصب کردن پکیج محبوب node-sass هستش.

# using npm
npm install node-sass

# using yarn
yarn add node-sass

2. تبدیل پسوند‌های .css به .scss

تمام فایلهایی که پسوند css رو دارن رو به scss تبدیل کنید.

3. ایمپورت کردن فایل sass به کامپوننت‌های React

توی هر کامپوننتی که نیاز داشتید، کافیه فایل sass رو ایمپورت کنید

import './App.scss';

در نهایت یک بار سرور رو ری‌استارت کنید و تمام ?

# using npm
npm start

# using yarn
yarn start