FrontEnd web
Published in

FrontEnd web

SCSS + Reactjs

How to add scss/sass in react.js?

Adding scss and sass in reactjs

How to add scss/sass in react.js?

Demo

What is Sass

According to Wikipedia, sass is a preprocessor scripting language interpreted or compiled into Cascading Style Sheets (CSS).

For More Read:

Let’s start

If you use the create-react-app in your project, use npm, and you can easily install and use Sass in your React projects with three simple steps.

Steps:

  1. Install node-sass: npm install node-sass
  2. Change file extension .cssto .scss
  3. Import your .scss files in your React components

Change:

CSS to scss

Code:

import React from "react";//import scss file in your componenetimport "./styles.scss";export default function App() {return (<><div className="card"><img className='image' src="https://source.unsplash.com/random" alt=' use image by unspash API '/><div className='cardBody'><h2> demo for scss </h2><p> According to Wikipedia sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS).</p><button> Read More</button></div></div><div className="card"><img className='image' src="https://source.unsplash.com/random" alt=' use image by unspash API '/><div className='cardBody'><h2> demo for scss </h2><p> According to Wikipedia sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS).</p><button> Read More</button></div></div><div className="card"><img className='image' src="https://source.unsplash.com/random" alt=' use image by unspash API '/><div className='cardBody'><h2> demo for scss </h2><p> According to Wikipedia sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS).</p><button> Read More</button></div></div></>);}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep singh

JavaScript || Reactjs || Nextjs || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || Writer || https://officialrajdeepsingh.dev/