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
Finally, adjust your stylesheet import to the new
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
Related articles about React: