آموزش اضافه کردن Sass به پروژه ی React

در این مقاله از گروه برنامه نویسی وارنا ، میخواهیم به آموزش اضافه کردن Sass و استفاده از آن در یک پروژه ی React بپردازیم.

اضافه کردن sass به پروژه ی React

Sass که مخفف عبارت syntactically awesome style sheets میباشد ، یک افزونه و به عبارتی یک preprocessor برای css میباشد که باعث میشود css قدرتمند تری داشته باشیم با امکانات بیشتر ولی بر خلاف css خام ، شما برای استفاده از sass ، ابتدا باید نسبت به نصب آن در پروژه ی خود اقدام کنید. ابتدا نسبت به نصب بودن npm در سیستم خود مطمئن شوید . که میتونید برای این کار از کد npm –version در cmd سیستم خودتون استفاده نمایید. سپس در پروژه ی React و در فایل app.js ، محتوای زیر را قرار دهید :

نصب sass

شما میتوانید برای نصب sass از دستور npm install sass استفاده کنید . این دستور ، آخرین نسخه ی Sass را به فایل package.json موجود در پروژه ی React اضافه خواهد کرد.

دوره ی آموزش Tailwind و sass وارنا

ما در گروه برنامه نویسی وارنا ، دوره ی آموزشی مخصوص تیلویند و sass  آماده کردیم که ازصفر تا صد اون و تموم فوت و فن های استفاده از کلاس هایش رو بهت آموزش میدیم .اگر میخوای تیلویند رو کامل یاد بگیری ، این دوره ی آموزشی رو از دست نده.

بخوانید درباره :Tailwind-css چیست؟

تغییر فایل های .css به .sass یا .scss

در پروژه ی React دو فایل css با نام های App.css و index.css را به App.scss و index.scss تغییر نام بدهید و در فایل app.js خود نیز آدرس این دو فایل را آپدیت کنید:

تبریک میگم ! حالا به راحتی میتوانید استایل های مورد نظر خود را در فایل scss نوشته و در پروژه ی react خود مشاهده نمایید.

آموزش و استخدام در وارنا

آیا میدانستید که شما میتوانید این Tailwind جذاب و دوست داشتنی رو از صفر تا صد با دوره ی آموزشی که گروه برنامه نویسی وارنا تدارک دیده ، یاد بگیری ؟ خبر خوب همینجا به پایان نمیرسه. شما میتوانید پس از پایان دوره و کسب نمره ی  قبولی ، با شرکت وارنا همکاری کنی و پروژه ی طراحی قالب UI دریافت کنی. همین حالا در دوره ی آموزش Tailwind-css و sass وارنا ثبت نام کن . فرصت رو از دست نده !