vs code 中的 live sass 编译器不会重新编译部分，只有 main.scss答案

【问题标题】：live sass compiler in vs code doesn't recompile partials, only the main.scssvs code 中的 live sass 编译器不会重新编译部分，只有 main.scss
【发布时间】：2020-06-09 23:57:45
【问题描述】：

我正在学习 sass，并在 vs 代码中使用实时 sass 编译器扩展。我还使用实时服务器扩展在浏览器中查看它。我有一个主 scss 文件，每次保存文件并在实时浏览器中显示更新的代码时，它都能很好地编译。但是，当我修改部分文件（例如_vaiables.scss）时，浏览器重新加载时没有css，只有html；然后，我需要重新保存 main.scss，以便可以在 _variables.scss 中看到这些更改。这就是它通常的工作方式吗？必须保存两个不同的文件才能在屏幕上看到更改，这有点烦人。我很确定有更好的方法。

这是我的 main.scss

@import "abstracts/functions";
@import "abstracts/mixins";
@import "abstracts/variables";

@import "base/animations";
@import "base/base";
@import "base/typography";
@import "base/utilities";

@import "components/button";
@import "components/composition";
@import "components/feature-box";
@import "components/card";

@import "layout/header";
@import "layout/grid";

@import "pages/home"

这里是一些用于实时 sass 编译器扩展的 settings.json 文件。

"liveSassCompile.settings.formats": [
        {
            "format": "compressed",
            "extensionName": ".css",
            "savePath": "/advanced-css-course/Natours/starter/css/sass-compiler"
        }
    ],

这里是html中css的链接

  <head>
    <link rel="stylesheet" href="css/sass-compiler/main.css" />
  </head>

提前致谢。

【问题讨论】：

标签： css visual-studio-code sass

【解决方案1】：

我最终安装了 node-sass 来编译代码

【讨论】：