Including SASS into your React projects depends on what you use to bootstrap your application. Here, I will show you how to use SASS in Create React App and Next.js based projects.
Adding SASS into Create React App projects
First, you need to boot your application as usual by using create react app:
npx create-react-app my-app
cd myapp
After you application has finished installing, install node-sass package using npm or Yarn
npm install node-sass
# or
yarn add node-sass
Then just rename your CSS files with .scss or .sass format:
Finally, adjust your stylesheet import to the new .scss file:
And that’s it. You can start using SASS features such as variables, nestings, imports, etc.
Adding SASS into Next.js projects
Just like Create React App, Next.js already supports SASS format for CSS. All you need to do is to install sass package into your Next.js project:
npm install sass
#or
yarn add sass
And you can start importing .scss and .sass files into your Next.js JavaScript code.