VS Code Live Sass编译器未更新文件 [英] vs code live sass compiler not updating files

问题描述

所以有人曾经问过类似的问题，但没有得到答案.

我正在学习SASS，并在vs代码中使用live sass编译器，但是它没有更新任何内容.我可以获取app.css文件以显示更改的唯一方法是按监视按钮，并基本上将其重置.它曾经没有做到过.保存文件后，所有更改都会显示出来.在输出终端中似乎没有任何问题.这是在本地环境中工作时查看sass文件实时更改的唯一方法，还是有更好的方法.

 .header {高度:8vh；背景颜色:#131921;位置:粘性；最高:0;z索引:100；align-items:居中;显示:flex;颜色:#fff;填充:30px 20px;& __ logo {宽度:100px；适合对象:包含；边距:0 20px;}& __ search {显示:flex;flex:1;align-items:居中;border-radius:35px;}& __ searchIcon {内边距:5px；高度:36px！重要；宽度:36像素！重要;背景颜色:#cd9042;border-radius:0 6px 6px 0！重要}& __ searchInput {内边距:10px;边界:无；宽度:100％;border-radius:6px 0 0 6px！重要;}& __ nav {显示:flex;证明内容:空间均匀；}& __ boxes {显示:flex;flex-direction:列;align-items:flex-start;颜色:#fff;边距:0 10px;文本转换:大写；文字对齐:左；}& __ boxesFirstLine {font-size:12px;行高:14px;字体粗细:400；颜色:rgba(255，255，255，0.7);}& __ boxesSecondLine {font-size:14px;字体粗细:700；行高:15px；padding-bottom:5px;padding-right:9像素；}& __ basketText {颜色:#fff;font-size:14px;行高:15px；字体粗细:700；padding-bottom:5px;padding-right:9像素；文本转换:大写；}} 

解决方案

对于所有遇到 Live Sass编译器都无法观看的问题.这是解决方案.

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

1. 转到设置(单击VSCode左下角上的设置图标，然后在出现的菜单中单击设置)./p>

2. 然后，搜索"字段将显示在顶部，我们将输入并搜索 Live Sass Compiler .

3. 在 Live Sass编译器出现后单击它，然后再次单击在Settings.json 链接中编辑并添加以下json:

    "liveSassCompile.settings.formats":[{格式":扩展"，"extensionName":.css"，"savePath":"/dist/css"；}]， 

保存，我们很好.

STEPS :轻松提供图片.

现在的文件夹结构:

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

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

c)然后，我们可以在VSCode的启动按钮上单击 Watch Sass ，现在 Live Sass Compiler 将继续监视 main.scss中的任何更改，并根据在 settings.json 中设置的 path ，它将自动在 dist 文件夹和 main.css 文件，这些文件最终将投入生产.

So someone has asked something fairly similar before but didn't get an answer.

I am learning SASS and am using the live sass compiler in vs code but it is not updating anything. The only way I can get the app.css file to show the changes is to press the watching button and basically reset the thing. It didn't used to do this. All changes were shown as soon as I saved the file. There doesn't seem to be anything in the output terminal that shows an issue. Is this the only way to see live changes in sass files when working in a local environment or is there a better way.

.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;
  }
}

解决方案

For all those facing issues with Live Sass Compiler not watching. Here is the solution.

After our extension is installed in VScode, we are going to look at some settings.

1. Go to settings (Click on the settings icon on bottom-left corner of your VSCode, and in the menu that appears click on settings).

2. Then a Search field will appear at the top, we will type and search for Live Sass Compiler.

3. Click on Live Sass Compiler once it appears and again click on Edit in Settings.json link and add following json:

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

Save and we are good to go.

STEPS: Providing Images for ease.

Now FOLDER STRUCTURE:

a) After creating your project folder in any of your Disk drives. Open it in VSCode and create the dist folder within project folder/ root of your project. And create an index.html file within the dist folder.

b) Then create another folder within the root folder and we are going to name it scss and within here we are going to create a main.scss.

c) Then we can click on Watch Sass at the bootom of VSCode, Now Live Sass Compiler will keep watching for any changes in the main.scss and based on our path set in settings.json, it will automatically create the css folder within the dist folder and a main.css file as well which ultimately goes to production.

这篇关于VS Code Live Sass编译器未更新文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！