如何将 SCSS 文件导入 HTML 文件
Posted
技术标签:
【中文标题】如何将 SCSS 文件导入 HTML 文件【英文标题】：How to import SCSS files into HTML files 【发布时间】：2020-06-21 10:27:25 【问题描述】：我用简单的 html 和 SCSS 创建了一个简单的网站项目。
HTML 文件如下所示：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<link rel="stylesheet" href="../../node_modules/bulma/bulma.sass">
<link rel="stylesheet" href="../../node_modules/bulma/css/bulma.css">
<link rel="stylesheet/scss" type="text/css" href="./header.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body>
<div class="header">
<div class="columns header-contents">
<div class="column is-four-fifths">
<div class="header-logo">
hier ist logo
</div>
<div class="header-title"> Title</div>
<div class="title-content">content</div>
</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
</div>
</body>
</html>
我现在想将 SCSS 文件导入这个 HTML 文件，但它不起作用。
有人有解决办法吗？
【问题讨论】：
这能回答你的问题吗？ Attaching a Sass/SCSS to HTML docs 【参考方案1】：在 codepen.io 中，您还可以实时使用 SCCS 代码。这是如何： 在 CSS 窗口痛苦中，单击窗格右上角的小设置图标。 然后从 CSS Preprocessor 的下拉列表中选择 SCCS。
我正在用它创建 3D 文本，效果很好。现在我必须编译该 SCCS 代码以将其转换为 CSS。在我弄清楚如何向你展示它有多酷或事情有多糟糕之后，我会在这里发布它。
这是我第一次与 SCCS 合作。
【讨论】：
浏览器不知道 SCSS，它是一种与 CSS 非常相似的不同语言，必须编译成 CSS。【参考方案2】：在 Visual Studio 代码中，您可以实时编译 scss。以下是步骤
一次
npm i -g sass
编译
sass --watch scss/index.scss css/index.css
在 HTML 中
<link rel="stylesheet" href="css/index.css">
【讨论】：
【参考方案3】：浏览器不会自动理解 SCSS 文件，您需要先将这些文件编译成 CSS。如果您是Node.js 用户，您可以通过运行以下命令安装 SASS 编译器：
npm install -g sass
然后通过运行以下命令编译您的 SCSS 文件：
sass input.scss output.css
现在您可以在 HTML 文件中链接 output.css。
【讨论】：
【参考方案4】：如果你使用 VSCode，你可以安装“Live SASS Compiler”
然后你可以创建一个.scss文件，然后点击右下角的“Watch Sass”
它会将你的 .scss 文件编译成一个 .css 文件，你可以将它导入到你的 HTML 文档中。
【讨论】：
【参考方案5】：您不会将 SASS/SCSS 文件直接导入 HTML 文件。您的 SCSS 将被编译成一个 .css 文件，而您包含该 css 文件。
我建议您查找一些有关 SCSS 的教程。
【讨论】：
【参考方案6】：您不能将 SASS/SCSS 文件“导入”到 HTML 文档。 SASS/SCSS 是一个 CSS 预处理器，在服务器上运行并编译成您的浏览器可以理解的 CSS 代码。
请使用此链接编译 sass/scss 文件。 https://thecoderain.blogspot.com/2019/12/run-and-compile-sass-scss-file-to-css.html
【讨论】：
【参考方案7】：你不能直接在html中导入scss文件，因为html只是读取css文件，你需要通过gulp或webpack将sass文件编译成css
【讨论】：
【参考方案8】：您只能“导入”css 文件。 SCSS 和 co 是预处理器，它们采用自定义语法并将其转换为 CSS。所以你必须将你的 SCSS 转换为 CSS，然后在你的 HTML 中 <link> 它，就像普通的 CSS 一样（bc。就是这样。）
【讨论】：
以上是关于如何将 SCSS 文件导入 HTML 文件的主要内容，如果未能解决你的问题，请参考以下文章