DEV Community

Cover image for SASS with React.JS
Kiran
Kiran

Posted on

SASS with React.JS

To use SCSS in React, you'll need to install a few dependencies and set up your development environment.

Here are the steps to get started with SCSS in React:

Install node-sass: Start by installing node-sass, a library that allows you to use SCSS in your React project. You can install it using npm by running the following command in your project directory:
Copy code
npm install node-sass
Create a SCSS file: Create a new SCSS file in your project's src directory, for example, styles.scss. This file should contain your SCSS code.

Import the SCSS file: In your React component, you can import the SCSS file using the following syntax:

js
Copy code
import './styles.scss';
Use the styles in your components: Once you've imported the SCSS file, you can use the styles in your React components just like you would with regular CSS.
For example, you could define a class in your SCSS file:

scss
Copy code
.my-class {
color: red;
}
And then use that class in your React component:

js
Copy code
import React from 'react';
import './styles.scss';

function MyComponent() {

return

Hello, world!;

}

That's it! You should now be able to use SCSS in your React project. Note that you may need to configure your build system to compile SCSS files into CSS, depending on your setup.

Top comments (0)