Question

我用简单的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文件，但无法正常工作。

有人可以解决吗？

Answer 1

如果您使用VSCode，则可以安装“ Live SASS编译器”

然后您可以创建一个.scss文件，然后单击右下角的“ Watch Sass”

它将把您的.scss文件编译成一个.css文件，您可以将其导入HTML文档中。

Answer 2

您只能“导入” css文件。 SCSS和co是预处理器，它们使用其自定义语法并将其转换为CSS。因此，您必须将SCSS转换为CSS，然后像常规CSS一样在HTML中<link>将其{bc。就是这样。

Answer 3

您不会将SASS / SCSS文件直接导入HTML文件。您的SCSS将被编译为.css文件，而您将包含该CSS文件。

我建议您查找有关SCSS的一些教程。

Answer 4

您不能直接在html中导入scss文件，因为html只是读取css文件，您需要通过gulp或webpack将sass文件强制为css

Answer 5

您不能将SASS / SCSS文件“导入”到HTML文档。 SASS / SCSS是在服务器上运行的CSS预处理程序，可编译为浏览器可以理解的CSS代码。

请使用此链接来编译sass / scss文件。 https://thecoderain.blogspot.com/2019/12/run-and-compile-sass-scss-file-to-css.html

Answer 6

浏览器不会自动理解 SCSS 文件，您需要先将此类文件编译成 CSS。如果您是 Node.js 用户，则可以通过运行以下命令来安装 SASS 编译器：

npm install -g sass

然后通过运行以下命令编译您的 SCSS 文件：

sass input.scss output.css

现在您可以在 HTML 文件中链接 output.css。

Answer 7

在 Visual Studio 代码中，您可以实时编译 scss。下面是步骤

一次

npm i -g sass

编译

sass --watch scss/index.scss css/index.css

在 HTML 中

<link rel="stylesheet" href="css/index.css">

如何将SCSS文件导入HTML文件

7 个答案: