مهدی نیسی
مهدی نیسی
خواندن ۱ دقیقه·۳ سال پیش

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

اضافه کردن Sass به پروژه‌های React
اضافه کردن 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 تبدیل کنید.

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

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

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

import './App.scss';

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

# using npm npm start # using yarn yarn start
reactsasscssjavascript
فرانت‌اند دولوپر
شاید از این پست‌ها خوشتان بیاید