Sass Styles In Reactjs Application

Sass Styles In Reactjs application is today’s leading topic. ReactJS is the most popular front-end javascript libraries among the developers. So today we will see how we can use the SCSS files in the create-react-app. First, we will install the create-react-app in our system via the following command.

npx create-react-app sass-app
cd my-app
npm start

You can see the full documentation here: https://github.com/facebookincubator/create-react-app

Now, by default this app is not using any SCSS file, it is merely using CSS files.

Prerequisites

ReactJS Tutorial For Beginners 2017

Sass Styles In ReactJS

Now, you can go the package.json file in 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 eject command will handover 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 the 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 a production mode, we have to use 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 a 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.

Finally, our Sass Styles In Reactjs application tutorial is over.