Sass and Create-react-app 2 setup
Published in
2 min readOct 25, 2018
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
- Node/npm should be installed.
- node-sass should be installed.
Let’s get our hands dirty and set up some boilerplate
- Make sure your create-react-app package is installed and updated to v2. Open terminal/cmd and type
create-react-app --version
- 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. - Now your system must have create-react-app v2 installed. Great, let’s use it.
- Now type
create-react-app Projectada
inside the terminal/cmd window. This should generate a project named Projectada. - After completion of the create-react-app process type
cd Projectada
in the terminal/cmd window. - Now create a new folder named Sass in the Projectada directory.
- Inside the Sass, folder create a file named main.scss or main.sass.
- Add some working css code to the main.scss or main.sass file, like below.
Wiring things up
- Now import main.scss file into the app.js file, like below.
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.
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.