vs code live sass 编译器不更新文件

所以有人之前问过类似的问题但没有得到答案。

我正在学习 SASS 并在 vs code 中使用实时 sass 编译器，但它没有更新任何内容。我可以让 app.css 文件显示更改的唯一方法是按下观看按钮并基本上重置该内容。以前没有这样做过。我保存文件后，所有更改都会显示。输出终端中似乎没有任何显示问题的内容。这是在本地环境中工作时查看 sass 文件实时更改的唯一方法还是有更好的方法。

.header {
  height: 8vh;
  background-color: #131921;
  position: sticky;
  top: 0;
  z-index: 100;
  align-items: center;
  display: flex;
  color: #fff;
  padding: 30px 20px;

  &__logo {
    width: 100px;
    object-fit: contain;
    margin: 0 20px;
  }

  &__search {
    display: flex;
    flex: 1;
    align-items: center;
    border-radius: 35px;
  }

  &__searchIcon {
    padding: 5px;
    height: 36px !important;
    width: 36px !important;
    background-color: #cd9042;
    border-radius: 0 6px 6px 0 !important;
  }

  &__searchInput {
    padding: 10px;
    border: none;
    width: 100%;
    border-radius: 6px 0 0 6px !important;
  }

  &__nav {
    display: flex;
    justify-content: space-evenly;
  }
  &__boxes {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #fff;
    margin: 0 10px;
    text-transform: capitalize;
    text-align: left;
  }

  &__boxesFirstLine {
    font-size: 12px;
    line-height: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
  }

  &__boxesSecondLine {
    font-size: 14px;
    font-weight: 700;
    line-height: 15px;
    padding-bottom: 5px;
    padding-right: 9px;
  }

  &__basketText {
    color: #fff;
    font-size: 14px;
    line-height: 15px;
    font-weight: 700;
    padding-bottom: 5px;
    padding-right: 9px;
    text-transform: capitalize;
  }
}

对于所有面临问题的人实时 Sass 编译器不看。这是解决方案。

在 VScode 中安装我们的扩展后，我们将查看一些设置。

1. 转到设置（单击设置图标bottom-leftVSCode 一角，然后在出现的菜单中单击settings).

2. 然后顶部会出现一个搜索字段，我们将输入并搜索Live Sass Compiler.

3. 点击Live Sass Compiler一旦出现并再次单击Edit in Settings.json链接并添加以下 json：

   "liveSassCompile.settings.formats": [
    {
     "format": "expanded",
     "extensionName": ".css",
     "savePath": "/dist/css"
    }
   ],
   

保存后我们就可以出发了。

STEPS:轻松提供图像。

现在文件夹结构：

a) 在任何磁盘驱动器中创建项目文件夹后。在 VSCode 中打开并创建dist项目文件夹/项目根目录中的文件夹。并创建一个index.html文件内的dist folder.

b) 然后在根文件夹中创建另一个文件夹，我们将其命名为scss在这里我们将创建一个main.scss.

c) 然后我们可以点击Watch Sass现在在 VSCode 的底部Live Sass Compiler将持续关注任何变化main.scss并基于我们的path set in settings.json，它会自动创建css文件夹内的dist文件夹和一个main.css文件以及最终投入生产的文件。