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 componentsscss/
→ 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:
Create a partial SCSS file for each component (e.g.,
_home.scss
,_about.scss
).Import all partials into a single main SCSS file (e.g.,
styles.scss
).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.
Subscribe to my newsletter
Read articles from SIDDHANT BOBDE directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by

SIDDHANT BOBDE
SIDDHANT BOBDE
👋Hi, my name is Siddhant. 👩💻I am a Software Engineer. I am passionate about technology, and coding. ✍I also like to read and write about technology and productivity. In my free time, I play guitar🎸 and also like to play badminton🏸.