如何将SCSS文件导入HTML文件_Html_Sass_Scss Mixins

如何将SCSS文件导入HTML文件

html sass

如何将SCSS文件导入HTML文件,html,sass,scss-mixins,Html,Sass,Scss Mixins,我用简单的HTML和SCS创建了一个简单的网站项目 HTML文件如下所示： <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hello Bulma!</title> <link rel="stylesheet

我用简单的HTML和SCS创建了一个简单的网站项目

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>


你好，布尔玛！
hier ist标志
标题
所容纳之物
汽车
汽车

我现在想把SCSS文件导入这个HTML文件，但它不起作用

有人提出一些解决办法吗

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

您不需要将SASS/SCSS文件直接导入HTML文件。您的SCS将被编译成一个.css文件，您将包含该css文件

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

您不能直接导入html中的SCSS文件，因为html只是读取css文件，您需要通过gulp或webpack将sass文件复杂化为css。

您不能将sass/SCSS文件“导入”到html文档中。 SASS/SCSS是一个CSS预处理器，在服务器上运行，并编译成浏览器能够理解的CSS代码

请使用此链接编译sass/scss文件。

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

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

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

浏览器不会自动理解scss文件，你需要先将这些文件编译成css。如果您是

Node.js

用户，可以通过运行以下命令安装SASS编译器：

npm install -g sass

sass input.scss output.css

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

npm install -g sass

sass input.scss output.css

现在，您可以在HTML文件中链接

output.css

。

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

一次

npm i -g sass

编撰

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

在HTML中

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

这是否回答了您的问题？