我可以在 <style> 标签中使用 SCSS 吗？答案

【问题标题】：Can I use SCSS in a <style> tag?我可以在 <style> 标签中使用 SCSS 吗？
【发布时间】：2020-12-03 17:38:09
【问题描述】：

我多年来一直在研究这个主题，但找不到任何关于它的信息。我的问题是：如何将 SCSS 放入包含 JavaScript 的普通 HTML 文档中。

我可以将 SCSS 放在 <style> 标记或外部 stylesheet 中吗？如果是这样（样式表之一），它是否必须像以下格式：style.scss 或 style.css。

如果你能提供帮助，谢谢。

【问题讨论】：

【解决方案1】：

SCSS 需要转换成 CSS 才能被浏览器使用。

您可以将 SCSS 内联到 <style type="text/scss">...</style> 元素中，然后使用客户端 JS 将其转换为 CSS 并将生成的 CSS 注入 DOM。

同样，您的构建工具链可以解析 HTML，提取 SCSS，通过转换后的 CSS 运行它，然后将其注入页面。

【讨论】：

【解决方案2】：

如果没有先编译为本机 CSS，SCSS 将无法在浏览器中运行。

Webpack 似乎是在开发期间执行此操作的首选构建工具。

【讨论】：

【解决方案3】：

如果你使用 VS CODE 那么有一个非常简单的方法可以用 html 添加 scss

(2) 创建文件（style.scss）。

(3) 安装后。在文件中写一些SCSS代码，然后你会在左下角菜单上找到（watch sass按钮）点击它，它将创建2个文件（1）style.css和（2） style.map.css。

(4) 现在，无论您在 .scss 文件中使用什么，它都将在 style.css 中编译。现在将你的 (style.css) 与 html 连接起来，它就可以工作了......

【讨论】：