I use vscode editor on Windows10
1. Install Node.js
First download node from the official website nodejs.org, and install it.
2. Initialize NPM
Open vscode terminal. Run the command
npm init
Press enter to all the options(description, author, keyword etc.) one by one or put the information in every option(if you wish, but not mandatory). After that, package.json file will generate in your file structure.
3. Install Sass
Go to npm website to find sass package.
Execute the command on terminal
npm install sass
After that node_modules folder and package-lock.json file will be added the file structure.
4. Write sass Command
Go to the package.json file. In the scripts section remove "test": "echo \"Error: no test specified\" && exit 1"
and add the small script
"scripts": {
"scss": "sass --watch sass/style.scss css/style.css"
},
After executing the script, it will generate style.css and style.css.map in the css folder.
- If you want to avoid style.css.map file, the script will be ```
"scripts": {
"scss-no-source-map": "sass --watch --no-source-map sass/style.scss css/style.css"
},
* If you want to generate compressed css, then add the script
"scripts": {
"minify": "sass --watch sass/style.scss --style compressed css/style.min.css"
},
* Altogether
"scripts": {
"scss": "sass --watch sass/style.scss css/style.css",
"scss-no-source-map": "sass --watch --no-source-map sass/style.scss css/style.css",
"minify": "sass --watch sass/style.scss --style compressed css/style.min.css",
"minify-no-source-map": "sass --watch --no-source-map sass/style.scss --style compressed css/style.min.css"
},
### 5. Run the Script
Execute the command on terminal to run the script
`npm run scss`
or
`npm run scss-no-source-map`
or
`npm run minify`
or
`npm run minify-no-source-map`
**_<u>Point to be Noted</u>_**
In html file, you must link with the css file generated in css folder.
![css link in html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jf8gp2sq0tek8y189aob.jpg)
For more effectiveness, use [live server extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) on vscode.
HAPPY CODING!!!
Top comments (0)