React Sass: How to Add Sass In React with an Example

Sass is a CSS preprocessor. Sass files(.scss extension files) are executed on the server and send CSS to the browser. On the other hand, react is the most popular front-end javascript library among developers.  In this example, we will see how we can use the SCSS files in the create-react-app.

How to add Sass in React

Adding Sass is one of the first things most developers do when starting an application from scratch.

Writing in plain CSS can be done, but the Sass preprocessors provide much more power with features like:

• Variables
• Nesting
• Math
• Mixins
• Functions
• Imports

Steps to Add Sass in React js

1. Install the node-sass: yarn add node-sass
2. Convert your .css to .scss(or you can create your own scss files)
3. Import the .scss files in your React components like App.js

New Approach to add Sass to React.js

Okay, to create a new React.js project, we will use the create-react-app toolkit.

Step 1: Build a new React project using create-react-app

npx create-react-app reactx

Now, the current version of React.js is 16.13.1.

The current version of react-scripts is 3.4.1.

As you can see, we have the version react-scripts above 2.0.0.

If you were creating the new React project in 2020, then chances are 100% that you should have above version 2.0.0, and you can continue with the approach.

Step 2: Add Node-sass module in React

Now, add the node-sass module using the following command.

yarn add node-sass

Step 3: Convert your App.css file to App.scss file

Change the App.css file to the App.scss file and add the following code.

$myColor: red;

h1 {
  color: $myColor;
  margin-left: 20%;
}

Here, you can see that we have defined a color variable whose value is red.

You can not define any variable in the plain CSS file, and you can only describe it in preprocessor files like SCSS.

Step 4: Import App.scss file inside the App.js file

Now, import the file inside the App.js file.

// App.js

import React from 'react';
import './App.scss';

function App() {
  return (
    <div class="contain">
      <h1>Header Component</h1>
    </div>
  );
}

export default App;

Save the file and go to the terminal or CMD and start the React dev server using the following command.

yarn start

It will open up the http://localhost:3000, and you will see that your App.scss file is working.

See the output.

From the output, you can see that we have successfully imported the Sass in React.js.

When you build a React application using many options at your disposal when it comes to styling.

You can style using plain classes and CSS files, using the style attribute or CSS Modules, to start with.

SCSS stylesheet is a popular option and much loved by many developers.

You can use it without any configuration at all, starting with create-react-app 2 or higher. However, if you want to use Sass in the older react version, you might configure it.

All you need is the .scss file, and you import it into a component.

Old Approach(Try to avoid this approach)

Now, you can go to the package.json file at the root of the project. It has scripts object like this.

"scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom",
    "eject": "react-scripts eject"
},

Here, we can eject the other styles. So go to the terminal and type the following command.

npm run eject

It will expose the webpack config file, which is handled by create-react-app. But now, after you hit the above command, it can be easily managed by us. So the eject command will hand over the configuration flow to us.

Also, you need to install the following command.

npm install

It will read the package.json file and install the required dependencies.

Step 1: Install a sass-loader.

You need to install the following package.

npm install sass-loader node-sass webpack --save-dev

Okay, so now we need to modify the webpack.config.js file. But where to find this file. Hmm, now, if you will analyze the folder structure of our project, then there is a new folder in a root called config. 

Go into that folder, and you will get a file called webpack.config.dev.js. We have to use this file when we are in a development model; otherwise, in production mode, we have to use the webpack.config.prod.js file.

Now, in the webpack.config.dev.js file, we need to add the following code to the rules object.

{
            test: /\.scss$/,
            use: [{
                loader: "style-loader"
            }, {
                loader: "css-loader"
            }, {
                loader: "sass-loader",
                options: {
                    includePaths: ["absolute/path/a", "absolute/path/b"]
                }
            }]
}

Step 2: Create the scss file.

In the src directory, create one file called App.scss file.

// App.scss

.container{
   h1{
      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
   }
}

Now, your App.js file looks like this.

import React, { Component } from 'react';
import './bootstrap.min.css';
import './App.css';
import './App.scss';

class App extends Component {
  render () {
    return(
      <div className="container">
        <h1>hello</h1>
      </div>
    )
    
  }
}

export default App;

Now, go to the terminal and start the server.

npm start

If you have installed all the dependencies correctly and now syntax error, then the server will start:

http://localhost:3000/

So, we have successfully run the Sass files in our create-react-app.

Conclusion

When you build web applications with React.js, you know that writing the JavaScript code is only half of the story.

The other half is implementing the design using style sheets.

When your application grows larger, using the plain CSS style sheets can become tedious and unmaintainable. Sass and LESS are the two most popular alternatives.

In this example, we have seen Sass is which is one of the most popular alternatives to CSS.

It extends the CSS language with variables, mixins, and many other features. It also lets us divide the style sheets into multiple files.

Sass source files come in two flavors. An older .sass format has now almost entirely been replaced by the .scss syntax.

The latter is the superset of CSS and lets you paste existing CSS code into the SCSS file without problems.

Sass compiles the SCSS source files into a single CSS file with the option of minifying the resulting output. The resulting file can be included on your web page, just like any other CSS style sheet.

Many CSS frameworks use Sass CSS preprocessors to generate their stylesheets. In this example, we have seen how to integrate scss files to React. We have seen two approaches. New approach and the old approach,

Using the new approach, we can keep the size of your CSS to a minimum.

It also gives us the opportunity for more semantic markup.

That’s it for this tutorial.