如何将SCSS文件导入HTML文件

问题描述 投票:-1回答:4

我用简单的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/[email protected]/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文件,但无法正常工作。

有人有解决方案吗?

html sass scss-mixins
4个回答
0
投票

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


0
投票

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

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


0
投票

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


0
投票

SASS文件的扩展名是.scss

© www.soinside.com 2019 - 2024. All rights reserved.