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

Kevin Kim

Jul 15, 2018·4 min read

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"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Replace the scripts with the following:

"scripts": {
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build-js": "react-scripts build",
    "build": "npm-run-all build-css build-js",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

Step 6: Create an App.scss file under the src directory

Step 7: Copy and paste the contents from App.css file onto your newly created App.scss file.

/* App.scss */.App {
  text-align: center;
}.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}.App-title {
  font-size: 1.5em;
}.App-intro {
  font-size: large;
}@keyframes App-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

Step 9: Add in some SASS/SCSS specific syntax in your App.scss file like so:

/* App.scss */$milk-white: #bdc3c7;
$grass-green: rgb(66,155,19);.App-header {
  background-color: $grass-green;
  height: 150px;
  padding: 20px;
  color: $milk-white;
}

Step 10: Start your React app

Type in: npm start in the Terminal.

Step 11: Check SASS/SCSS is firing!

Hopefully you see the header change its color schemes confirming that our Sass is firing on all its cylinders.

Heads-up! Do NOT start adding new lines of CSS code in your App.css from here on. Only add them into App.scss! Whatever code is written in App.scss gets processed/converted into pure CSS that will overwrite App.css file.

Also, do NOT change any calls for App.css to App.scss such as from import './App.css' to import './App.scss' from the App.js file. Again, our Sass file is only a preprocessor for our actual css file.

Getting Font Awesome to go

Step 1: Install font-awesome from the Terminal.

npm install --save font-awesome

Step 2: Import font-awesome to the index.js file.

Go to the index.js file at the root of the react app folder.

Add this line: import 'font-awesome/css/font-awesome.min.css' next to where all the importing is taking place like so:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'font-awesome/css/font-awesome.min.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

Step 3: Add some Font-awesome code in your React app.

Let’s add in a class thumbs-up emoji in the body of our app. Remember, CSS classes are referred to as className in React and not class.

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" /><h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <i className="fa fa-thumbs-up"></i>
      </div>
    );
  }
}

Step 3: Restart your React app and check to see if the emoji is loading

Ctrl + C to exit out of the React app, and npm start to start again…

Check the browser.

Great. The font-awesome thumb is loaded properly.

Sources

Using Pre-processors Scss and Sass with Create-React-App: After trying various Sass/Scss installation blogs and tutorials, this one worked the fastest without any ejecting, and was very easy and interactive to follow along. Watch this quick 8 minute video to get more in-depth knowledge of what all those things under the scripts hash means.

How to include a Font Awesome icon in React’s render(): After fumbling around with the react-fontawesome package, I found this stack-overflow post to be the most straightforward.

Hope you enjoyed this post. Please feel free to leave a few claps down below!