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

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/