Sass and Create-react-app 2 setup

Adding Sass to you create-react-app used to be a hustle in its own, I did an article about it too (here). But with create-react-app v2 out now, we no longer need those workarounds. Thanks to the react team, create-react-app v2 got the much need out of the box sass support.

Prerequisite

1. Node/npm should be installed.
2. node-sass should be installed.

Let’s get our hands dirty and set up some boilerplate

1. Make sure your create-react-app package is installed and updated to v2. Open terminal/cmd and type create-react-app --version
2. If the output is anything less than 2 or command not found type
   npm i -g create-react-app inside terminal/cmd window,
   else continue.
3. Now your system must have create-react-app v2 installed. Great, let’s use it.
4. Now type create-react-app Projectada inside the terminal/cmd window. This should generate a project named Projectada.
5. After completion of the create-react-app process type cd Projectada in the terminal/cmd window.
6. Now create a new folder named Sass in the Projectada directory.
7. Inside the Sass, folder create a file named main.scss or main.sass.
8. Add some working css code to the main.scss or main.sass file, like below.

main.scss file

Wiring things up

1. Now import main.scss file into the app.js file, like below.

App.js file

2. Type npm install --save node-sass inside you project directory to install and add node-sass package.

3. Now start your server using npm start

4. You should see something like this.

Body margin added from our main.scss file.

That’s all folks.

I’ll release a new post that should have a more cleaner approach of adding sass files to create-react-app project.

Happy Coding.