How to use SASS in create-react-app?

 by Robin Wieruch
 - Edit this Post

The article is a short how to add Sass support to your create-react-app application. It shows you how to setup Sass, but also how to use it in your components. You will learn how to style a specific component with it and how to define global style, such as variables for your color schema, that can be used throughout your application.

After you have setup your application with create-react-app (e.g. create-react-app my-app), you can install the Sass support with npm install sass --save-dev for create-react-app. You don't need to change any other configuration.

Now, let's try out how Sass in React works. Let's say our App component already uses a Navigation component to display links the following way:

import React, { Component } from 'react';
import Navigation from './Navigation';
const LINKS = [
{ label: 'Website', to: 'https://www.robinwieruch.de/' },
{ label: 'Twitter', to: 'https://twitter.com/rwieruch' },
];
class App extends Component {
render() {
return (
<div>
<Navigation links={LINKS} />
</div>
);
}
}
export default App;

Next, create the Navigation component in a src/Navigation.js file. As you can see, it takes a list of links and renders its content in a list of anchor tags.

import React from 'react';
import './Navigation.scss';
const Navigation = ({ links }) => (
<div className="Navigation">
<ul>
{links.map(link => (
<li key={link.to}>
<a href={link.to}>{link.label}</a>
</li>
))}
</ul>
</div>
);
export default Navigation;

The file also imports a Navigation.scss file that can be used for the Sass styling of the component. One such styling is already in place with the "Navigation" className. Let's see how the .scss file could look like to define this class:

.Navigation {
background-color: #222;
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
li {
margin: 10px 20px;
}
a {
text-decoration: none;
}
a,
a:visited {
color: #ffffff;
}
a:hover {
color: #525dce;
}
}

Sass allows you to nest your tags. That's already one improvement by using this preprocessor over normal CSS. Another feature of Sass may be variables. Change the following two lines in order to use variables instead:

@import './index.scss';
.Navigation {
background-color: $primary-background;
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
li {
margin: 10px 20px;
}
a {
text-decoration: none;
}
a,
a:visited {
color: #ffffff;
}
a:hover {
color: $primary-color;
}
}

The variables were imported from the src/index.scss file in which you have to define the variables after all. Make sure to rename your src/index.css file to src/index.scss before you make the following changes in it:

body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
'Helvetica Neue', sans-serif;
}
$primary-color: #525dce;
$primary-background: #222;

Last but not least, change the import in the src/index.js file for this file to capture the correct file extension:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

Finally, the variables are usable in the src/Navigation.scss file. Once you start your application, everything should work as expected. You can find the final application in this GitHub repository.


Sass comes with plenty of powerful features, such as nesting and variables, to give you more flexibility when building your web applications. However, it is only one way of styling your applications. There are plenty of other ways to do it. In React, two other common ways of styling applications are styled-components and .

Keep reading about 

If you happen to have a custom Webpack setup, you may be wondering how to set up SASS with Webpack. This short tutorial walks you through the process. First of all, you need to install a SASS loader…

Just recently I had to use Docker for my create-react-app web application development. Here I want to give you a brief walkthrough on how to achieve it. First of all, we need a React application…

The Road to React

Learn React by building real world applications. No setup configuration. No tooling. Plain React in 200+ pages of learning material. Learn React like 50.000+ readers.

Get it on Amazon.