Setting up SCSS

Lecture 313:- Setting up SCSS

To set up SCSS in a project, we need to follow these steps:

1. Install node-sass:

npm install node-sass --save-dev

1. Create an SCSS file (for example, styles.scss) in a directory (for example, /src/scss/)
2. Import this SCSS file in your main JavaScript file:

import './scss/styles.scss';

1. Run the project using a command that compiles the SCSS file into a CSS file. One option is to use the "sass" command-line tool to watch the SCSS file and recompile it whenever it changes:

sass --watch src/scss/styles.scss src/css/styles.css

Alternatively, we can add a script to package.json to run this command using npm:

"scripts":Copy code

    "watch-sass": "sass --watch src/scss/styles.scss src/css/styles.css" }``` Now we can run ```npm run watch-sass``` to compile the SCSS file and watch for changes. 5. Link the generated CSS file in the HTML: ```<link rel="stylesheet" href="/css/styles.css">``` Now the styles defined in SCSS should be applied to the HTML.