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. f older 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 command in our terminal which fires the webpack dev server on localhost port 3000 and outputs the following: npm start I hope you have found this useful, if you have any questions, please drop them in the comment section below.

Facebook

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How To Use SASS In Your Create-React-App

Too Long; Didn't Read

Company Mentioned

Iyara Ferguson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How To Use SASS In Your Create-React-App

Too Long; Didn't Read

Company Mentioned

Iyara Ferguson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES