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

【问题标题】：vs code live sass compiler not updating filesvs code live sass 编译器不更新文件
【发布时间】：2020-09-18 13:35:36
【问题描述】：

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

我正在学习 SASS，并在 vs 代码中使用实时 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;
  }
}

【问题讨论】：

这里是scss文件的内容。我不认为这是一个问题，因为它会在编译器重新启动后立即工作。
你的 sass 编译器和 vscode 的版本？
vs 代码版本 1.49 sass 编译器 3.0.0
你能给我们看一张你的IDE的截图，它显示编译状态的部分吗？
你的意思是输出终端吗？如果是这样

标签： css visual-studio-code sass

【解决方案1】：

对于所有面临 Live Sass Compiler 不观看问题的人。这是解决方案。

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

转到设置（单击 VSCode 角落 bottom-left 上的设置图标，然后在出现的菜单中单击 settings）。
然后顶部会出现一个搜索栏，我们输入并搜索Live Sass Compiler。

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

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

保存，我们可以开始了。

步骤：轻松提供图片。

现在的文件夹结构：

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

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

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

【讨论】：