Can I use SCSS in a <style> tag?

Question

I have been looking into this subject for ages and cannot find anything about it. My question is: How do I put SCSS into a normal HTML document with JavaScript in it as well.

Can I put the SCSS in a <style> tag or in an external stylesheet? If so (the stylesheet one) does it have to be like the following format: style.scss or style.css.

Thank you if you can help.

Answer 1

SCSS will not run in a browser without first being compiled to native CSS.

Webpack seems to be the build tool of choice for doing this during development.

Answer 2

SCSS needs to be transformed into CSS before browsers can use it.

You could put SCSS inline in a <style type="text/scss">...</style> element and then use client-side JS to convert it to CSS and inject the resulting CSS into the DOM.

Likewise your build toolchain could parse the HTML, pluck out the SCSS, run it through a converted to get CSS and then inject that back into the page.

Answer 3

well if your using VS CODE then there is a very simple way to add scss with html

(1) install the live sass compiler extention Link : https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass

(2) create a file (style.scss).

(3) after the installation.Write some SCSS code in the file and then you will find (watch sass button) on left bottom menu click on it and it will create 2 files (1)style.css and (2)style.map.css.

(4)now whatever you right in .scss file it will compile in style.css. Now connect your (style.css) with html and boom it will work......