如何将SCSS文件导入HTML文件 [英] How to import SCSS files into HTML files

查看:70
本文介绍了如何将SCSS文件导入HTML文件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我用简单的HTML和SCSS创建一个简单的网站项目.

I create a simple website project with simple HTML and SCSS.

HTML文件看起来像这样:

the HTML file seems like this:

<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文件,但无法正常工作.

and I want to now import SCSS file into this HTML file, but it was not working.

有人可以解决吗?

推荐答案

如果使用VSCode,则可以安装"Live SASS编译器"

If you use VSCode you can install "Live SASS Compiler"

然后,您可以创建一个.scss文件,然后点击"Watch Sass"在右下角

Then you can create a .scss file and click on "Watch Sass" on bottom-right

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

And it's going to compile your .scss file into a .css file that you can import into your HTML document.

这篇关于如何将SCSS文件导入HTML文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆