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

#react #css #webdev #javascript

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

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;
}

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