Using Sass/Scss with React App (create-react-app)
1 min readApr 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
andbuild
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'
inindex.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/