How To Use SASS In Your Create-React-App

Create-react-app is facebook's attempt at setting up a developer to get started building react apps very quickly. It is a boilerplate that comes pre-configured with a wide array of tools and technologies that ensure a smooth running react application. However, create-react-app does not come with Sass preprocessing by default. To add sass preprocessing, we would need to add an extra dependency to our list of dependencies known as node-sass.

Node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass. It allows you to natively compile .scss files to css at incredible speed and automatically via a connect middleware.

For this walkthrough, I assume that you have already setup the create-react-app project.

To install node-sass as a development dependency, simply run the following command in your terminal

npm install node-sass --save-dev

Now that we have node-sass successfully installed, let us take a moment to look at the folder structure created by the create-react-app command.

folder structure generated by create-react-app

Next, we rename the App.css file extension into App.scss and import into the App.js file

App.scss file

Next, we import the App.scss file into the App.js file, so that the App.js file becomes as follows:

App.js file which imports the App.scss file

Lastly, we run the npm start command in our terminal which fires the webpack dev server on localhost port 3000 and outputs the following:

I hope you have found this useful, if you have any questions, please drop them in the comment section below.