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”, 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:

npx create-react-app sass-setup

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

🚀 Step 2: Install Sass

To install Sass, run:

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.

🚀 Step 3: Import SCSS Files

Import index.scss in your index.js file:

// 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:

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

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

export default App;

// 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

Create a Home.js component inside the components folder:

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

Add below code _home.scss file.

// _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:

// styles.scss
@import 'home';

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

// 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.

// 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

npm start

You should now see the styled Home component rendered properly.

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:

// 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:

// _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.

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

Use the newly created component in your App component

// 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.

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.