将 SCSS 附加到 HTML 文档 [关闭]

Posted 2023-03-05

【中文标题】将 SCSS 附加到 HTML 文档 [关闭]

【英文标题】：Attaching a SCSS to HTML docs [closed]

【发布时间】：2013-10-13 11:25:45

【问题描述】：

您好，我是网页设计新手。我想学习如何在 head 标签中将 SCSS 文件附加到 html 文件：

<link href="example" rel="stylesheet/scss" type="text/css">

我试过了，但没有看到结果。我猜它就像 LESS 框架。还有一个问题：如果我想使用 SCSS，我应该将它编译到托管还是不编译？

【问题讨论】：

嘿！只需使用jsonformatter.org/scss-to-css 并粘贴 SCSS 代码，它就会将该代码转换为 CSS！您需要做的就是复制 CSS 输出

你应该像往常一样链接 style.css，因为当你编译 SCSS 文件时，它会生成一个 CSS 文件并使用它来应用你添加的样式。

【参考方案1】：

您不能将 SASS/SCSS 文件“附加”到 HTML 文档。

SASS/SCSS 是一个 CSS 预处理器，在服务器上运行并编译成您的浏览器可以理解的 CSS 代码。

有一些 SASS 的客户端替代方案可以在浏览器中使用 javascript 进行编译，例如 LESS CSS，但我建议您编译为 CSS 以供生产使用。

只需在 HTML 文件中添加 2 行代码即可。

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>

【讨论】：

拒绝执行来自 'localhost:8100/less.js' 的脚本，因为它的 MIME 类型 ('text/html') 不可执行，并且启用了严格的 MIME 类型检查。

text/html?!!哪里来的？顺便说一句，在生产中使用.less 不是一个好主意，编译成.css 并包含它。否则，上述内容适合开发。

网站更新版本：<link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="https://cdn.jsdelivr.net/npm/less@4.1.1" ></script>