Css vs代码中的实时sass编译器不'；t重新编译部分，仅main.scs_Css_Visual Studio Code_Sass

Css vs代码中的实时sass编译器不'；t重新编译部分，仅main.scs

css visual-studio-code sass

Css vs代码中的实时sass编译器不'；t重新编译部分，仅main.scs,css,visual-studio-code,sass,Css,Visual Studio Code,Sass,我正在学习sass，并在vs代码中使用livesass编译器扩展。我还使用live server扩展在浏览器中查看它。我有一个主scss文件，每次保存该文件并在live browser中显示更新后的代码时，该文件都能很好地编译。但是，当我修改部分文件（例如_vaiables.scss）时，浏览器会重新加载，而不使用css，只加载html；然后，我需要重新保存main.scss，以便在_variables.scss中看到这些更改。通常是这样吗？必须保存两个不同的文件才能在屏幕上看到更改，这有点烦人

我正在学习sass，并在vs代码中使用livesass编译器扩展。我还使用live server扩展在浏览器中查看它。我有一个主scss文件，每次保存该文件并在live browser中显示更新后的代码时，该文件都能很好地编译。但是，当我修改部分文件（例如_vaiables.scss）时，浏览器会重新加载，而不使用css，只加载html；然后，我需要重新保存main.scss，以便在_variables.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"

下面是live 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>

提前感谢。

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