Sass Live Compiler extension is not compiling file after it is changed via chrome dev tool

[lukasdancak]

hello I am using VS Code with your extension Sass Live Compiler. When I change .scss file via Chome dev tool, the file did change in VSCode, and I checked that it is saved on disk with new data, BUT extension Sass Live Compile dont compile it until I manualy save the .scss file again, or until I make som change in file.

I have set ON the AUTO SAVE in VSCode. Can somebody help ? Thanks

[glenn2223]

Sorry for the delay, not been felling too well.

Also, I'm afraid that I'm not quite following your environment setup.

• Are you using a live preview extension and editing the dev tools from/for that?
• Is the file your saving in the workspace?
• Is it an installed extension that's allowing you to modify the SASS file via the dev tools?
  • Are you sure it's not updating the compiled CSS rather than the precompiled SASS file?

Sorry, without knowing your environment and file setup it's pretty difficult to help.

Whatever the case, it sounds like - however you're editing the file - it's not triggering the vscode.workspace.onDidSaveTextDocument event that the extension is tied to

[lukasdancak]

Chrome version 115.0.5790.171 default settings
Windows 10 Home
VSCode 1.81.0
extension Live Sass Compiler 6.0.6
I am attaching the screen record

12-26-11.mp4

[glenn2223]

So it looks like you're using Live Server. You should apply your changes in VS Code and it will then apply them to your live preview. There shouldn't be any need to edit a SASS file in the dev tools.

However, if this is something you require then you'd have to raise this issue with VS Code highlighting that vscode.workspace.onDidSaveTextDocument isn't triggered when a file is changed using dev tools

As this is an issue with VS Code I'm afraid that it's out of scope for this project

[lukasdancak]

OK thanks for answer, I didnt know that it is problem of VSCode.....Have a nice day.

[glenn2223]

Not a problem, I'll close this off for now as out of scope

[aeschli]

If the file is not saved through VS Code, you don't get a onDidSaveTextDocument event.
But you should get a onDidChangeTextDocument event.

[lukasdancak]

So then it looks like issue of Sass Live Compiler extension?

[glenn2223]

Thanks for the info, didn't realise. Work on a fix now

[glenn2223]

@aeschli, just wondering how you'd implement this as every character added is triggering onDidChangeTextDocument. As I'm sure you can imagine, I can't compile with every character as the SASS would be invalid 90% of the time.

Even saving the file triggers the event - which is, obviously, duplicating the event on normal text editing. I have no problem removing the onDidSave.. event if I/we can figure something solid out

Surely just saving the file in dev tools could trigger the "onDidSave..." event? VS Code is clearly already watching the files and could trigger the save event if the date modified changes?? 🤷

[aeschli]

as I'm sure you can imagine, I can't compile with every character as the SASS would be invalid 90% of the time.

Well, out language servers do that, as they want to generated diagnostics also for the unsaved document content and tell the user about compile errors before saving. It's always done with a delay so validation only happens when the user has stopped typing.

If all you are only interested in on what's on disk, then use a file watcher (workspace.createFileSystemWatcher)
As said, onDidSave is only for saves triggered by VS Code.

[glenn2223]

Well, out language servers do that, as they want to generated diagnostics also for the unsaved document content and tell the user about compile errors before saving. It's always done with a delay so validation only happens when the user has stopped typing.

Okay, interesting... so pass errors back to VSCode to display to the user before they save. Will take a look into this

If all you are only interested in on what's on disk, then use a file watcher (workspace.createFileSystemWatcher)
As said, onDidSave is only for saves triggered by VS Code.

Yeah, this and other things make me think I should move fully over to VSCode's filesystem and watcher

---

Thanks for all the input @aeschli, it's really helpful!!

[retrofinger]

I ran into this as well. Here's a workaround:

1.) Disable the watching of file changes within SASS Live Compiler
2.) Create tasks.json (or edit it) within your project's root's .vscode folder
3.) Add the following (or add the "tasks" entry to what's already there):

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Sass Watcher",
      "type": "shell",
      "command": "sass",
      "args": [
        "--watch",
        "css:css"
      ],
      "problemMatcher": [],
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "presentation": {
        "reveal": "never",    // This hides the terminal window
        "focus": false,       // Keeps the terminal from stealing focus
        "panel": "dedicated"  // Ensures the terminal is isolated from others
      },
      "runOptions": {
        "runOn": "folderOpen" // Automatically runs when the project is opened
      }
    }
  ]
}

This assumes that you have installed sass CLI system-wide. If not, run "brew install sass" first.

Now, after relaunching VSCode it will launch the task in a terminal. Personally i found the spinner that shows up there very distracting, so i created a bash script instead:

./runsass:

#!/bin/bash
nohup sass --watch css:css > sass.log &

And updated my tasks.json:

{
    "version": "2.0.0",
    "tasks": [
      {
        "label": "Sass Background Watcher",
        "type": "shell",
        "command": "./.vscode/runsass",
        "isBackground": true,
        "presentation": {
          "reveal": "never",
          "panel": "shared"
        },
        "runOptions": {
          "runOn": "folderOpen"
        }
      }
    ]
  }

It would be amazing if the developer could look into this matter. Using DevTools Sources tab to edit scss files is very common and not having the compiler trigger in such a case is quite a handicap.

Needless to say: great extension! Thank you for maintaining it.