DEV Community

Justin Largo
Justin Largo

Posted on

How to add sass to your create-react-app in 2022

Hey y'all! Here is a quick guide how to use sass inside your create-react-app projects in 2022!

In the past, I see most tutorials using something like watch or node-sass (which uses LibSass and is deprecated), so here's an alternative!

First step is to create a React project using the following command:

npx create-react-app hello-sass
Enter fullscreen mode Exit fullscreen mode

Side note if you're new to React: The hello-sass parameter is what I decided to name the project it creates, feel free to use whatever name you want.

Then, create a Sass file in the src directory of your React app, we'll call ours main.scss

Inside that file we can take inspiration from the code on the Sass Basics guide just to see if it works:

./src/main.scss

$font-stack: Helvetica, sans-serif;
$primary-color: red;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
Enter fullscreen mode Exit fullscreen mode

For the next step, just make sure to add your new Sass file into the top of your App.js with import './main.scss. When you run your React app with npm run start, you should see your beautiful sass changes appear onto the screen!

I hope you found this helpful! I'm going to try and create more technical content this year to strengthen my writing and creativity skills so hopefully I can make cooler guides like this in the future!

PS: If you find ANYTHING wrong with the code or implementation above, let me know! I'm happy to make sure people are learning the correct things from my posts :)

Top comments (2)

Collapse
 
lxctn profile image
Lex • Edited

Hello !
So you say that sass is installed by default with create-react-app, Are you sure about this ?
I try it :

Failed to compile. Cannot find module 'sass'

Also the create-react-app documentation say : "To use Sass, first install sass"

Maybe you have install sass globaly ?

a create-react-app have sass configured by default, but sass is not installed.
Not sure why yet, it seem strange.

Collapse
 
fasunle profile image
Kehinde Hussein, Fasunle

You are right @lex