Sass watch is detecting changes but not compiling to css

Question

When I run sass --watch app.sass:app.css terminal shows that changes have been detected to sass but won't compile to css. I am using Bourbon so all my .scss and .sass files are imported via mixins.

ex.

 >>> Sass is watching for changes. Press Ctrl-C to stop.
 >>> Change detected to: css/2-modules/top-nav.scss

Are you sure that you don't have any errors in `top-nav.scss` or any of the files that `top-nav.scss` might import? — Blake Frederick, Jan 22 '15 at 23:16
No errors, actually I have made various changes to other .scss files in the project to test the compiler and it is still only detecting changes made to the .scss files without compiling them. — tonyynot, Jan 22 '15 at 23:23

score 7 · Answer 1 · edited May 11 '15 at 05:26

7

Make sure the file you are saving with an _filename.scss has been properly imported into the mainfile.scss. if you have not imported the _filename.scss it will detect a change but not compile.

edited May 11 '15 at 05:26

gvlasov

18,638
21
74
110

answered May 11 '15 at 04:53

iamlukem

71
1
2

score 2 · Answer 2 · answered Aug 08 '19 at 06:25

2

I had the same issue! In my case, it was caused by having several @imports listed like this:

@import 'colors';
@import 'fonts';
@import 'size';

When i changed it to this it all started working again:

@import 'colors', 'fonts', 'size';

Although it should not be needed:
"Sass imports have the same syntax as CSS imports, except that they allow multiple imports to be separated by commas rather than requiring each one to have its own @import." - sass-lang.com/documentation

answered Aug 08 '19 at 06:25

philipdev

33
6

In my case, it only locates the first one : `SassError: Can't find stylesheet to import. @import "../assets/scss/elements/ie", "elements/defaults";` – Asef Hossini May 31 '22 at 22:58

score 0 · Answer 3 · answered Jan 23 '15 at 09:33

0

check for the Config.rb file in your folder. without it you have to Ctr c every time and pass this command sass --watch scssname:cssname

then You can find your code in css.

answered Jan 23 '15 at 09:33

Pranav Shah

89
11

score 0 · Answer 4 · answered Dec 30 '16 at 14:51

0

Are you sure all of your partials are being imported into app.scss? I had the same issue, only to realize the partial file I was modifying (_custom.scss) wasn't actually being imported by the main.scss.

answered Dec 30 '16 at 14:51

score 0 · Answer 5 · answered Oct 24 '19 at 10:06

Create scss file by correct naming (make sure there is underscore "_")

_custom.scss

Import _custom.scss in main.scss (no underscore required)

// main.scss
      @import "custom";

Compile the code

sass --watch main.scss main.css

This will compile the code properly.

score 0 · Answer 6 · edited Oct 17 '20 at 09:36

0

In your style folder create a file.scss with "_" in the beginning. For example: _fileName.scss

Import it at the start of your principal scss file. For example:

// in **mystyle.scss**   
do : **@import "fileName"** (without the  underscore )

Run your sass in the terminal. For example:
```
sass mystyle.scss:mystyle.css --watch
```

edited Oct 17 '20 at 09:36

fcdt

2,371
5
14
26

answered Oct 17 '20 at 05:19

JOY BOY

1
1

score 0 · Answer 7 · answered Apr 18 '23 at 08:33

I had the same problem, but it turns out I didn't include the '-w' at the end of my script, in order for the script to keep watching for changes and compile the sass file.

This is what I mean: "scripts": "compile:sass": "node-sass sass/main.scss css/style.css -w"

Sass watch is detecting changes but not compiling to css

7 Answers7

Linked