Friday, 17 May, 2019 UTC

React Starter: Adding Sass to Create React App Applications

React Starter: Adding Sass to Create React App Applications

Summary

Adding Sass is one of the first things most developers do when starting an application. Writing in plain CSS can be done, but Sass provides much more power with features like:
  • Variables
  • Nesting
  • Math
  • Mixins
  • Functions
  • Imports
  • And More
Add Sass to Create React App using a single line: yarn add node-sass
For the official docs, check out the Create React App guide.
For a video walkthrough, here you go!
https://scotch.io/embed/vimeo/336880270
Steps to Add Sass
The steps to add Sass to Create React App are:
  1. Install node-sass: yarn add node-sass
  2. Convert your .css to .scss
  3. Import your .scss files in your React components like App.js
Install node-sass
Here's a deeper dive. In order to add Sass to a Create React App application, we need a single command:
# using npm
npm install node-sass --save

# using yarn
yarn add node-sass
Renaming .css to .scss
Once you have that, we can rename our App.css to App.scss.
Import the .scss File
In our App.js file, we can import the Sass file using the .scss extension.
import './App.scss';
Once we restart our yarn start command, we can see that our Sass file is imported!
Conclusion
Create React App allows us to extend it with a quick command!

... more @ pub.scotch.io

pub.scotch.io