avatarRajdeep Singh

Summary

The website provides a tutorial on how to integrate SCSS with React.js using node-sass and includes a demonstration and additional resources for learning more about SCSS.

Abstract

The web content serves as a guide for developers looking to incorporate SCSS into their React.js projects. It explains that SCSS, a preprocessor scripting language, can be easily added to React projects created with create-react-app by following three steps: installing node-sass, changing the file extension from .css to .scss, and importing the SCSS files into React components. The article also includes a brief explanation of what SCSS is, a code demonstration, and links to further reading on the subject. Additionally, it encourages readers to engage with the author through comments or social media contacts provided at the end of the article.

Opinions

  • The author assumes familiarity with create-react-app, suggesting that the target audience is developers with some experience in React.js.
  • The article promotes the use of SCSS in React projects, implying that SCSS can enhance styling capabilities.
  • By providing a live demo and screenshots, the author conveys a hands-on approach to learning, emphasizing the practical application of the tutorial.
  • The inclusion of additional reading resources indicates the author's support for continuous learning and exploration of SCSS beyond the basics covered in the article.
  • The author is open to feedback and community engagement, as evidenced by the invitation to comment and the provision of contact information and social media links.
  • The recommendation of an AI service at the end of the article suggests the author's endorsement of cost-effective tools that offer similar capabilities to more expensive options like ChatGPT Plus (GPT-4).

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 componenet
import "./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>
</>
);
}

Demo:

check demo understand all essential step

Read More on Medium:

Conclusion:

I thought you read in this article you use sass or scss in your project any problems, queries, or suggestions, tell me to comment below.

Contact me:

Thanks for Reading

JavaScript
CSS
Scss
SaaS
Reactjs
Recommended from ReadMedium