# Organize SCSS in React Projects Like a Pro

Hello everyone!  
This blog is a follow-up to my previous post, [**“Elevate Your Styling with SASS”**](https://blog.siddhantbobde.com/elevate-your-styling-with-sass), where I explained the advantages of using SCSS over traditional CSS. In this post, I’ll walk you through how to effectively integrate SCSS into a ReactJS project.

You won’t need to import SCSS files for every component, and you’ll also be able to share SCSS styles across components without importing multiple files.

## 🚀 Step 1: Create a New ReactJS Project

Run the following command to create a new React project named `sass-setup`:

```javascript
npx create-react-app sass-setup
```

After removing unnecessary files, your project structure should look like this:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1716348284887/999ebe59-49ff-4041-8c7c-cdd07813ccb6.png align="center")

## 🚀 Step 2: Install Sass

To install Sass, run:

```javascript
npm install sass
```

After installation, convert all `.css` files to `.scss` by renaming the file extensions.

**Note:** Although the preprocessor is called **Sass**, we use the `.scss` extension here. The difference between `.sass` and `.scss` lies in their syntax. Sass uses indentation-based syntax, while SCSS is more CSS-like, using curly braces and semicolons.

You can read more about SASS vs SCSS [here](https://www.geeksforgeeks.org/what-is-the-difference-between-scss-and-sass/).

## 🚀 Step 3: Import SCSS Files

Import `index.scss` in your `index.js` file:

```javascript
// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.scss';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```

Similarly, import `App.scss` in your `App.js`:

```javascript
// App.js
import './App.scss';

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;
```

```javascript
// App.scss
.App {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 3rem;
  margin-top: 5rem;
}
```

## 🚀 Step 4: Organize Folders

Create the following folder structure:

* `components/` → to store React components
    
* `scss/` → to store SCSS files for each component
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1716386425359/33d24b76-8c0a-4909-8f23-ddf929451fbf.png align="center")

Create a `Home.js` component inside the `components` folder:

```javascript
import React from 'react';

const Home = () => {
	return (
		<div className="home-container">
			<h1 className='title'>This is home page</h1>
			<p className='sub-title'>
				Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam quaerat quia dolores ut non magni quibusdam sed molestias odio, reprehenderit
				suscipit velit veritatis consequuntur, harum, officia ab similique inventore adipisci.
			</p>
		</div>
	);
};

export default Home;
```

## 💡 Understanding Sass and the Power of Partials

Before we style our `Home` component, it's important to understand **how Sass works**, particularly the concept of **partials**.

When you create an `.scss` file, the **Sass preprocessor** compiles it into regular CSS that your React app can use.

However, when you create a file prefixed with an underscore—like `_home.scss`—you're creating a **partial** file. Partial SCSS files:

* Are **not compiled** into standalone CSS files.
    
* Are meant to be **imported into other SCSS files**.
    
* Help organize your styles into **modular, maintainable chunks**.
    

### Why Use Partials?

Instead of importing an SCSS file into every single component, a better approach is to:

1. **Create a partial SCSS file** for each component (e.g., `_home.scss`, `_about.scss`).
    
2. **Import all partials into a single main SCSS file** (e.g., `styles.scss`).
    
3. **Import just the main SCSS file** into your root-level component (e.g., `App.scss`).
    

**This centralizes your styles**, reduces repetition, and makes your codebase much easier to manage as your project grows.

### 🛠️ Let’s Do It

Create two files in your `scss/` folder:

* `styles.scss` – your **main stylesheet**
    
* `_home.scss` – a **partial** that holds styles specific to the Home component
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1716393577454/3bf5d3fe-3672-4c01-bd4f-47b0bd06eb8f.png align="center")

Add below code `_home.scss` file.

```javascript
// _home.scss
.home-container {
    height: 20%;
    width: 30%;
    background-color: grey;

    h1 {
        font-size: 20px;
    }

    p {
        font-size: 15px;
        color: lightblue;
    }
}
```

In `styles.scss`, import the partial like this:

```javascript
// styles.scss
@import 'home';
```

Now add the `Home` component in your `App` component and also import `styles.scss` in your `App.scss`

```javascript
// App.js
import './App.scss';
import Home from './components/Home';

function App() {
  return (
    <div className="App">
      <Home/>
    </div>
  );
}

export default App;
```

**Now,** `App.scss` **imports just** `styles.scss`**, and all component styles flow through this single point of entry.**

```javascript
// App.scss
@import './scss/styles.scss';

.App {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 3rem;
  margin-top: 5rem;
}
```

## 🚀Step 5: Run the App

```javascript
npm start
```

You should now see the styled `Home` component rendered properly.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1716393863619/cecf8d86-f2a2-4355-abab-ce9ac3934702.png align="center")

Now you can see that we did not import the SCSS file directly into your component. Instead, we created a main stylesheet to include all the SCSS files for your components. This approach centralizes your styles, making your codebase more organized and easier to manage.

### Add Another Component

Let’s add an `About.js` component:

```javascript
// About.js
import React from 'react';

const About = () => {
  return (
    <div className='about-container'>
        <h1>This is a about page</h1>
        <p>My name is siddhant bobde and i like to write technical blogs.</p>
    </div>
  )
}

export default About;
```

Create `_about.scss`:

```javascript
// _about.scss
.about-container {
    height: 30%;
    width: 50%;
    background-color: whitesmoke;

    h1 {
        font-size: 25px;
    }

    p {
        font-size: 20px;
        color: darkgrey;
    }
}
```

Update `styles.scss` and add `_about.scss` file.

```javascript
// styles.scss
@import 'home';
@import 'about';
```

Use the newly created component in your App component

```javascript
// App.js
import './App.scss';
import About from './components/About';
import Home from './components/Home';

function App() {
  return (
    <div className="App">
      <Home/>
      <About/>
    </div>
  );
}

export default App;
```

Run your code, and you will see the new component below the Home component.

### 🔁 Reusing SCSS Across Components

Now, let's say you write some styles in `_home.scss` and want to apply those styles in your About component. You can do this by adding the styles to `_home.scss` and using the class name in your About component.

Note that you need to ensure the hierarchy of styling classes is correct when styling the component in SCSS. The `_about.scss` file will have access to all the CSS defined above it, like `_home.scss`, because the CSS hierarchy follows a top-down approach.

In this way, you can configure Sass in your React.js application. If you have any thoughts or suggestions, please share them in the comments section. Follow me for more technical blogs.

## ✅ Conclusion

By integrating SCSS effectively in your React application, you can keep your styles modular, organized, and easy to maintain. Using **partials** and a **centralized main stylesheet** allows you to avoid repetitive imports and ensures a scalable structure as your project grows. This approach not only improves maintainability but also keeps your styling logic clean and consistent across components.

You can find the GitHub link of the above code [here](https://github.com/SiddhantBobde/sass-setup).

Thanks for reading! I hope this guide helped you understand how to set up and manage SCSS in your React projects effectively. If you have any questions, feedback, or suggestions, feel free to leave a comment.