Sass --watch detects change, yet not compiling to CSS

Question

So I've read Sass watch is detecting changes but not compiling to css and many other places, but nothing seems to help me. When the .css file is first created, it returns that it has made 'front-page.css' etc. This all works, until you continue to make updates and it just says 'Change detected to: ...' but doesn't update the .css file. Any idea as to why this is happening? Thanks!

From the terminal:

sass --watch scss/front-page.scss:front-page.css
>>> Sass is watching for changes. Press Ctrl-C to stop.
[Listen warning]:
  Listen will be polling for changes. Learn more at "..."
>>> Change detected to: scss/front-page.scss
      write front-page.css
      write front-page.css.map
>>> Change detected to: scss/front-page.scss
>>> Change detected to: scss/front-page.scss

In summary, it creates the file, it detects changes, but doesn't update the CSS file.

Answer 1

It seems something gets corrupted in SCSS's cache which makes it impossible for SCSS to properly compile the output.

This issue is resolved by deleting the .sass-cache directory in the folder where you run the command.

Answer 2

In my case, I wasn't importing the .scss files for a page into the main file that compiles styles for the project. So even though the listener was picking it up, it had no reason to include into the compilation, and that was just a detail that I had missed.

Answer 3

I have had the same issue but what I have gotten to know is that when you have typos in your sass code the Live sass Compile won't update the css file. So what i did i created a new sass file and copied and pasted snippets of my code to check where the bug could be and the issue was fixed.

Answer 4

Most probably the syntax is wrong. Please check if the path is correct. In your case scss must be in the same level of the package.json file.

Answer 5

This is my first contribution! lol. I'm assuming this is in the terminal. Make sure you are running sass in the folder you want to work with. Then, you write your command sass --watch front-page.scss:front-page.css take out the "scss"