Using Sass/Scss with React App (create-react-app)

1 min read · Apr 12, 2018

There are multiple ways to integrate sass with react app generated by create-react-app but I think this is the the simplest one which I am going to write now. Steps are simple

Folder Structure

  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.js
    App.test.js
    index.js
    styles/
      /components
      main.scss

Steps:

• Create app create-react-app app-name && cd app-name
• Add following dependencies

- yarn add -D react-app-rewired
- yarn add -D react-app-rewire-sass-modules
- yarn add -D sass-loader
- yarn add -D node-sass

• Change npm start and build scripts

{
  "start": "react-scripts start",
  "build": "react-scripts build"
}

to

{
  "start": "react-app-rewired start",
  "build": "react-app-rewired build"
}

• Add config-overrides.js file at root level and add following code there

const rewireSass = require('react-app-rewire-sass-modules');

module.exports = function override(config, env) {
  config = rewireSass(config, env);
  return config;
};

• Add scss/sass styles in /src/styles directory

• Add import '../styles/main.scss' in index.js file

• Run your app npm start and you are good to go :) yahooo….

Demo: https://mzohaibqc.github.io/create-react-app-sass/

Github: https://github.com/mzohaibqc/create-react-app-sass

Credit: SCSS styles/src is taken from here https://templated.co/