Whenever I can I’ll integrate Sass into projects, so this time I was determined to configure Sass AND CSS modules into my create-react-app project. Let’s start from the very beginning with creating a new project.
npm i -g create-react-app
create-react-app project-name
cd project-name
Now when you npm start or yarn start your project is all configured and ready to go…except there’s no Sass out of the box. Everything came neatly bundled together, but now we’re going to have to eject in order to change the Webpack configuration. Word of caution, once you eject you can never go back!
npm run eject or yarn eject
Now you have a config folder at your disposal. This makes you have full control over your project since you can access all of your packages, scripts and configurations. Navigate to your package.json file and look how many dependencies you have! We’re going to be adding some more to support the preprocessing of Sass (.scss files).
npm i sass-loader node-sass --save or yarn add sass-loader node-sass
Once you have installed these packages navigate to the webpack.config.dev.js file within the config folder. Here we’re going to add another loader, so our .scss files can process.
