vs code live sass compiler not updating files

Question

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

user_6938969 · Answer

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.

Go to settings (Click on the settings icon on bottom-left corner of your VSCode, and in the menu that appears click on settings).
Then a Search field will appear at the top, we will type and search for Live Sass Compiler.

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 compiler not updating files

1 Answers