Styling React Using Sass

To style a React application using Sass, create a Sass file the same way as you create CSS files, but Sass files have the file extension .scss and import the Sass file the same way you imported a CSS file.

Here are the steps to integrate the Sass file in the React.js project.

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

npx create-react-app reactx

Step 2: Add Node-sass module in React

Add the node-sass module using the following command.

yarn add node-sass

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

$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; you can only describe it in preprocessor files like SCSS.

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

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, go to the terminal or CMD, and start the React dev server using the following command.

yarn start 

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

See the output.

How To Add Sass In React

Old Approach(Try to avoid this approach)

You can go to the package.json file at the project’s root. It has a 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, we can easily manage it. 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.

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

We need to modify the webpack.config.js file. But where to find this file? Now, if you analyze our project’s folder structure, 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 must use this file in a development model; otherwise, in production mode, we must use the webpack.config.prod.js file.

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 there is a syntax error, then the server will start:

http://localhost:3000/

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

That’s it.

5 thoughts on “Styling React Using Sass”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.