How to include .scss file into HTML?

Praveena Thavarajah - Sep 23 '21 - - Dev Community

I was finding a solution from yesterday to link a file to an HTML file.
Finally, I found the solution to the problem.

I share the solution with you all and hope it will be informative to one of you.

If there is a separate .scss file as style.scss How to link .scss file in .html file?

Problem:

Initially, I tried to link in the .html file as mentioned below,

The above method did not work. Later I understood that It is impossible to link a .scss or saas file inside the HTML file.

Solution:

I use VS Code as IDEA for coding purposes.
VS Code has an extension named Live SAAS Compiler.
Image of Live SAAS Compiler in the VS Code

Install the extension and then link the .scss link as mentioned below,

(make sure to change the style.scss into style.css inside the link tag but not in the original file).

Then click on the Watch Sass button in the footer of the VS Code IDEA.
Alt Text
At last, you can view the design using the browser.

Thank you so much for reading the post. I hope you got to learn a new tip.

. . . . . . . . . . . . . . .