Introduction: We can use SASS in React using a package called node-sass. Using node-sass we can just create sass files and use them as the normal CSS files in our React application and node-sass will take care of compiling sass files.
Prerequisite: Introduction to SASS
Modules: To compile sass code, node-sass can be used.
Setting up environment and execution:
Step 1: Create React App command
npx create-react-app foldername
Step 2: After creating your project folder, i.e., folder name, move to it using the following command:
Project Structure: It will look like the following.
Step 3: Install required modules using the following command:
npm install node-sass
Step 4: Create a sass file as shown below:
Step 5: Following will be the code in sass syntax.
Step 6: Following will be the code in the App.js file.
Step to Run Application: Run the application using the following command from the root directory of the project:
Note: If there is a compiling issue downgrade node-sass as follows:
npm install email@example.com
Output: Now open your browser and go to http://localhost:3000/, you will see the following output: