Get Sass and Font Awesome up and running on your Create React App in 5 minutes

Source: https://kids.nationalgeographic.com/animals/cheetah/#cheetah-running.jpg

Starting up various React projects, I am always finding myself re-googling the same things over and over again. Implementing Sass and Font Awesome are definitely on the top of my list.

In order to save myself, and hopefully others some time in the future, I’ve written a little cheatsheet for getting the preprocessor and the icons-library up and running as quickly as possible.

Getting Sass to go

Step 1 (if you haven’t already): create your react app from the Terminal like so:

npx create-react-app sass-fontawesome-demo

Step 2: cd into your react app like so:

cd sass-fontawesome-demo

Step 3: Install node-sass-chokidar

npm i -s node-sass-chokidar

Step 4: Install npm-run-all

npm install --save npm-run-all

Step 5: Open your package.json located at the root of your react app.

You should see something like this for your scripts:

{
  "name": "sass-fontawesome-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-scripts": "1.1.4"…