如何将 SCSS 文件导入 HTML 文件答案

【问题标题】：How to import SCSS files into HTML files如何将 SCSS 文件导入 HTML 文件
【发布时间】：2023-03-03 15:30:02
【问题描述】：

我用简单的 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

标签： html sass scss-mixins

【解决方案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。就是这样。）

【讨论】：