SASS 在 Visual Studio Code 1.33.0 中不起作用

Question

开始为 SASS 使用 Visual Studio 代码。 创建如下简单的 HTML。

<!DOCTYPE html>
   <html>
       <head>
        <title>SCSS Test</title>
        <link rel="stylesheet" href="./styles/main.scss">
       </head>
       <body>
           <header>
               <h1> Hello SCSS </h1>
               <button>Hello</button>
           </header>
           <div>
             <button>Submit</button>
             <div>
               <h1> Our Contact Info </h1>
               <p class="">This is our info</p>
             </div>
           </div>
        </body>
    </html>

添加了一个名为“styles”的文件夹，我在其中创建了“main.scss”文件，如下所示，并使用“Live Sass Compiler”扩展来生成 CSS 文件和映射文件。

SCSS文件：

$primaryHeaderBack : lightblue;

header {
    background: $primaryHeaderBack;
}

预期输出：

标题背景颜色不是浅蓝色而是白色。 为了看到所需的输出，我应该怎么做？ 请帮我。

Answer 1

@Moibabrata ，@coops 要求您将 CSS 文件链接到 HTML，因为一旦实时 SASS 编译器启动，SASS 文件就会转换为 CSS 文件，由于 HTML 文件无法理解.sass ，您必须使用.css ，但不要不用担心，您的.css文件将包含您在 .sass 文件中键入的所有内容。

您不必修改 .css 文件，无论您在.sass文件中做什么，都会在.css文件中自动更新。

所以代替这个： <link rel="stylesheet" href="./styles/main.scss">

使用： <link rel="stylesheet" href="./styles/main.css">

希望你明白。

Answer 2

您的主要错误是您“链接了 .scss 文件” ，浏览器无法读取 .scss 文件，它总是读取 .css 文件。 所以你必须在你的 HTML 文件中链接 .css 文件。

然后开始观察您的 .scss 文件以进行编译。 在此处输入图片说明

完成这些步骤，您将检查您的浏览器。 我希望你能得到预期的结果。 谢谢你。

Answer 3

您不能直接将 sass 用于 html 文件，因为它不起作用。 但是如何将 sass 文件转换为 html？

SCSS 文件是需要转换为 CSS 文件的文件（因此浏览器知道如何使用它们）。 您可以将 SCSS 视为任何其他高级语言，例如 C#； 您将其编译/构建为目标语言（在本例中为浏览器）。

答案是您必须将 sass 文件转换为 css 文件。 您可以通过 cmd 执行此操作。 首先，打开cmd进入项目文件夹，然后在cmd中写下这个命令：

sass scss\your_scss_filename css\your_css_filename

运行此命令后，您可以在文件夹中看到其输出。 祝你好运。

SASS 在 Visual Studio Code 1.33.0 中不起作用

问题描述

SCSS文件：

预期输出：

3 个解决方案

解决方案1
4 已采纳 2019-04-10 13:39:47

解决方案2
1 2020-07-01 07:29:49

解决方案3
0 2019-04-10 13:11:10

SASS 在 Visual Studio Code 1.33.0 中不起作用

问题描述

SCSS文件：

预期输出：

3 个解决方案

解决方案1 4 已采纳 2019-04-10 13:39:47

解决方案2 1 2020-07-01 07:29:49

解决方案3 0 2019-04-10 13:11:10

解决方案1
4 已采纳 2019-04-10 13:39:47

解决方案2
1 2020-07-01 07:29:49

解决方案3
0 2019-04-10 13:11:10