Latest Code Tutorials

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.

If you want to learn more about React and Redux then check out this React 16.6 – The Complete Guide (incl. React Router & Redux) course.
npx create-react-app sass-app
cd my-app
npm start

You can see the full documentation here:

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

Content Overview


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 We have to use this file when we are in a development model; otherwise, in a production mode, we have to use file.

Now, in the 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

      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 () {
      <div className="container">

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:


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

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




  1. arjun says

    its not working

  2. arjun says

    exclude: [/\.js$/, /\.html$/, /\.json$/, /\.scss$/,],

    dont forget to exclude scss

    1. sharrod says

      Hello where do you exclude?

  3. Pawan says

    iTS working without even include “exclude: [/\.js$/, /\.html$/, /\.json$/, /\.scss$/,],”

  4. Pawan says

    iTS working without even added”exclude: [/\.js$/, /\.html$/, /\.json$/, /\.scss$/,],”

Leave A Reply

Your email address will not be published.

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