Using Sass in Create React App v2

  • 2018-12-01 04:27 AM
  • 115

create-react-app version 2.0 added a lot of new features. One of the new features is support for Sass.

Aiodex’s Referral Program will give you 20% -80% commission from their transaction fee for 7 years. The value will be calculated starting from the date the member you invite sign up. Starting from the first year is 20%, after each year increased to 10% from the first day of next year. For the 300K members who are enjoying the transaction fee refund policy, if they are one of your invited members, you will receive a commission until the system start charging their transaction fees. For example, if the new system start charging from 2020–01–01, you will start receiving commissions and since it is the second year then you will receive 30% ☞ https://aiodex.com/p/referral-program
Get Free 15 Geek ☞ https://my.geekcash.io/ref/5b3c4924d38b6158ce04633f or http://geekcash.org/
Learn to Code ☞ https://codequs.com
CodeGeek’s Discuss ☞ https://discord.gg/KAe3AnN
Playlists Video Tutorial ☞ http://vrl.to/d5fc7d45

You may be concerned about using Sass in React. Isn’t a smarter way to write styles with CSS-in-JS libraries like styled-components or aphrodite? I believe that adding Sass support to Create React App will be a big help to beginners of React. How do I use Sass in React is one of the questions I always hear from people getting into React. With the React 16.6 additions like React.memo() and the React 16.7 functional additions like hooks, starting with React will be easier than ever!

Quick Start

The steps to use Sass in Create React App are:

  1. Install node-sass: npm install node-sass
  2. Change .css files to .scss
  3. Change any imports to use .scss
npm install node-sass -S

Once we’ve changed the file name from .css to .scss, we can import the Sass:

// replace 
import "./styles.css";

// with
import "./styles.scss";

Done! Create React App will know to parse your .scss files and add the styles to your project.

Using and Sharing Sass Variables

How do we share variables across files? We are able to import our Sass files from other Sass files. Let’s say you create a variables file:

variables.scss

$primaryColor: #BADA55;

We can import this inside of another file like we normally would in Sass:

styles.scss

// import starting from the src/ folder
@import "variables.scss";

// can also be relative import
// @import "./variables.scss";

// we can use the $primaryColor variable now
h1, h2 {
  color: $primaryColor;
}

Sass Files from 3rd Party Packages

If we want to use any 3rd party libraries like Bulma or Bootstrap (Bulma is my favorite right now), we don’t need to import the entire CSS library anymore.

With Sass in React, we can import just the files we need. First, we have to install Bulma.

npm install bulma -S

If we look at Bulma’s GitHub in the sass/ folder, we can see where they place their .sass files. Notice they are using .sass and we are using the .scss variant. No problems, node-sass can read and @import both!

Import files from node_modules using ~

The ~ let’s webpack and Create React App know to look in the node_modules/ folder for the files we need. Let’s add a few of the files we need to our app:

styles.scss

// import using ~
@import "~bulma/sass/utilities/_all.sass";
@import "~bulma/sass/base/_all.sass";
@import "~bulma/sass/elements/button.sass";
@import "~bulma/sass/layout/section.sass";

Now, we can use Bulma’s button and section.

App.js

function App() {
  return (
    <div className="App section">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <button className="button is-danger is-outlined">
        Hello
      </button>
    </div>
  );
}

This approach let’s us keep our CSS bundle sizes as small as possible as we only import what we need.

Conclusion and Demo

Using Sass in React is a quick way to get styling in your app. It is also recommended to look at CSS-in-JS solutions so that we can create even more modular CSS in our component based React apps.

Here’s the CodeSandbox with the demo of Sass in Create React App 2:

Learn More

Modern React with Redux

Become a JavaScript developer - Learn (React, Node,Angular)

The Complete React Web Developer Course (2nd Edition)

Node with React: Fullstack Web Development

Beginner Full Stack Web Development: HTML, CSS, React & Node

React JS and Redux - Mastering Web Apps

React 16 - The Complete Guide (incl. React Router 4 & Redux)

Suggest