Sass --watch not recompiling

Question

Sass updates my main stylesheet build.css when I save changes to build.scss, but will not update build.css when I save changes to any partials, for example _grid-settings.scss. I essentially have to manually re-save build.scss each time I make a change to a partial in order for Sass to detect a change.

From my terminal:

Justins-MacBook-Air:ageneralist justinbrown$ sass --watch stylesheets:stylesheets
>>> Sass is watching for changes. Press Ctrl-C to stop.
  write stylesheets/build.css
[Listen warning]:
  Listen will be polling for changes. Learn more at https://github.com/guard/listen#polling-fallback.

My directory is:

stylesheets/
├── base
│   └── _base.scss
├── build.css
├── build.scss
├── layout
│   └── _layout.scss
└── vendor
    ├── _grid-settings.scss
    ├── bourbon
    ├── highlight
    └── neat

I'm using:

Sass 3.3.8.
Ruby 2.0.0-p353
OSX 10.9

I've looked through several SO posts on issues with sass --watch but none have helped yet to guide me to a solution.

EDIT: I'm adding my build.scss here just in case that's the issue:

@import "vendor/bourbon/bourbon";
@import "vendor/grid-settings";
@import "vendor/neat/neat";
@import "base/base";
@import "layout/layout";

Is it possible that sass is not monitoring all of the subdirectories underneath `stylesheets`? — JustinTBrown, Jun 13 '14 at 16:24
@JAre tried it by adding `vendor/test.scss` but still no luck. `sass --watch` processes both non-partial scss files on launch but does not update test.css with subsequent saves. — JustinTBrown, Jun 14 '14 at 02:55
Is that the file is imported into the `build.scss` stylesheet, or in one of the imports? — piouPiouM, Jun 16 '14 at 06:25
@piouPiouM when I tested with `test.scss` I added `@import "vendor/test.scss";` to `build.scss`, but it was only being included in the initial compilation when launching `sass --watch`. I did find a haphazard solution below though. — JustinTBrown, Jun 17 '14 at 20:13

score 4 · Answer 1 · answered Oct 09 '14 at 13:14

4

I had the same issue.

I managed to fix it by deleting the SASS cache directory. I also ran sudo gem update to update all gems on my system.

I'm not sure which of these things fixed it or if it was a combination of the two.

answered Oct 09 '14 at 13:14

Antfish

1,313
2
22
41

It's been awhile, but I think if I had done either a the `gem update` or the `gem install listen` suggested by @EoghanM below that probably would have done the trick. – JustinTBrown May 02 '16 at 17:13
1

Where does the SASS cache live? – nipponese Aug 26 '16 at 21:57
Its in a hidden folder called ".sass-cache" in the root of wherever you are compiling your SASS files. – Antfish Aug 31 '16 at 15:45

score 4 · Answer 2 · answered May 12 '17 at 10:16

I had also stuck to the problem of Sass seemed wasn`t watching all file changes correctly.

Sass can`t watch changes in files that are located by the path directing upwards the watching file. For example:

Variant A (Which I had)

scss/
├── base
│   └── controller1.scss
├── utils
│   └── utils.scss
└── app
    └── app.scss

Where app.scss is:

@import '../base/container1'
@import '../utils/utils'

compiling

sass --watch app/app.scss:../css/styles.css

sass --watch app:../css

In both cases sass tracks only app.scss file changes, but not controller1.scss or utils.scss

Variant B (solution)

scss/
├── base
│   └── controller1.scss
├── utils
│   └── utils.scss
└── app.scss

Where app.scss:

@import 'base/container1'
@import 'utils/utils'

compiling

sass --watch app.scss:../css/styles.css

Variant C (solution) also works

scss/
├── base
│   └── controller1.scss
├── utils
│   └── utils.scss
└── app.scss

Where app.scss:

@import 'base/container1'

and controller1.scss:

@import '../utils/utils'
// ...

Running into the same problem in 2020 with dart sass. Seems to be correct that it doesn't watch any file paths that involve going above the folder the file being watched is. Thanks! — SuperColin, Feb 18 '21 at 16:20
underrated answer. i came across the same problem, where I was importing scss files above the current directory. In that case --watch flag didn't seem to be working. — Divij Jain, Oct 30 '22 at 10:47

score 0 · Accepted Answer · answered Jun 17 '14 at 19:08

0

This isn't a satisfactory answer for me, but I ended up trying out another gem that would handle preprocessing, guard-livereload, and though it itself didn't work, when I came back to try sass --watch sass properly monitored my stylesheets directory for changes (partials included) and subsequently recompiled build.scss.

I'm not certain why it works now, but am guessing one of the gems installed along with guard or guard-livereload solved the issue. Perhaps listen or fssm?

answered Jun 17 '14 at 19:08

JustinTBrown

157
1
10

The 'listen will be polling for changes' warning went away for me when I did `sudo gem install listen`. Not sure if that's what fixed the overall issue for you. – EoghanM Apr 29 '16 at 11:24
@EoghanM that seems in line with what I was seeing. – JustinTBrown May 13 '17 at 22:20

score 0 · Answer 4 · edited Sep 06 '21 at 19:19

0

interface FileImporter {
  findFileUrl(
    url: string,
    options: {fromImport: boolean}
  ): FileImporterResult | null;
}

edited Sep 06 '21 at 19:19

Sven Eberth

3,057
12
24
29

answered Sep 06 '21 at 18:00

Seek Vectors

1
1

2

Welcome to StackOverflow. While this code may answer the question, providing additional context regarding *how* and/or *why* it solves the problem would improve the answer's long-term value. – Sven Eberth Sep 06 '21 at 19:19

Sass --watch not recompiling

4 Answers4

Linked