Jekyll not watching or auto regenerating sass

1

Hey Team, I’m having a very vexing issue getting Jekyll to watch and auto regenerate sass files. Watch sees changes I make to html just fine. If I restart the jekyll server, it will then see and make the sass changes. But this work around is not ideal. I’ve gone through every suggestion at this older post: https://github.com/jekyll/jekyll-watch/issues/10 and found numerous other older pages that were also no avail.

I’ve reinstalled jekyll and jekyll watch. I’m using versions 3.6.0 and 1.5.0 respectively. I’m using OSX Sierra. If it matters, I’m using this in conjunction with Bootstrap 4.0.0 dev version. For the sake of completeness, here’s my Gem list:

*** LOCAL GEMS ***

addressable (2.5.2, 2.5.1)
bigdecimal (default: 1.3.0)
bundler (1.15.4)
bundler-unload (1.0.2)
colorator (1.1.0)
did_you_mean (1.1.0)
executable-hooks (1.3.2)
ffi (1.9.18)
forwardable-extended (2.6.0)
gem-wrappers (1.2.7)
io-console (default: 0.4.6)
jekyll (3.6.0)
jekyll-redirect-from (0.12.1)
jekyll-sass-converter (1.5.0)
jekyll-sitemap (1.1.1)
jekyll-toc (0.3.0, 0.3.0.pre1)
jekyll-watch (1.5.0)
json (default: 2.0.2)
kramdown (1.15.0, 1.14.0)
liquid (4.0.0, 3.0.6)
listen (3.0.8)
mercenary (0.3.6)
mini_portile2 (2.3.0, 2.2.0)
minitest (5.10.1)
net-telnet (0.1.1)
nokogiri (1.8.1, 1.8.0)
openssl (default: 2.0.3)
pathutil (0.14.0)
power_assert (0.4.1)
psych (default: 2.2.2)
public_suffix (3.0.0, 2.0.5)
rake (12.1.0, 12.0.0)
rb-fsevent (0.10.2)
rb-inotify (0.9.10)
rdoc (default: 5.0.0)
rouge (2.2.1, 1.11.1)
rubygems-bundler (1.4.4)
rvm (1.11.3.9)
safe_yaml (1.0.4)
sass (3.4.25)
scss_lint (0.54.0)
test-unit (3.2.3)
xmlrpc (0.2.1)

Thoughts? Any help would be greatly appreciated.

2

your sass files are in the _sass folder?
are you using any plugins like jekyll assets (doesn’t look like it from your list)?

I would make a new site and see if it works in there just to see if you can narrow it down - if it works with the default site then maybe there is something wrong with your BS sass structure.

I can highly recommend using Gulp to either do the watch and regenerate with live reloading of the browser or to take on the whole sass and asset processing parts away from jekyll.

3

rdyar, thanks for the response. Actually you’ve pointed out an aspect of my setup that I should have brought up in my initial post. I have the following in _config.yml:

sass:
load_paths:
- /acme/assets/style/
- /brandx/assets/style/

I will have at least 5 single page sites (located in their own folders) that belong to the same campaign. I’ll be creating these in their own folders within the larger Bootstrap installation. Since I need to monitor sass changes in each folder I’m using the load_paths approach vs the sass_dir: _sass.

My scss files reside in the folders labeled “style” above. I have experimented with also setting the sass_dir option like such:

sass:
sass_dir: style
load_paths:
- /acme/assets/style/
- /brandx/assets/style/

If the above setup is too complicated for Jekyll, can you recommend a good online Gulp tutorial to setup watch? Thoughts?

4

those don’t look like they are indented properly - is that just the way they copied in or are they really like that in you config?

I had no problem with sass with jekyll but it was not nested like that.

As for gulp here is something i used to use that is fairly simple:

you would need to have node installed, and then it looks like I left out the package.json file that would load the couple things required by gulp - as well as gulp itself.

I also just made this post which links to another page on my site about what I am doing now - and in that thread is also a link to a post from @mmistakes about the same thing - though he is way ahead of me.

This is a good basic tutorial:

5

Thanks again for the assist. The indentation was lost during the paste into this forum post. I tried following another web article regarding gulp and browser-sync. I got confused when I realized that setup wouldn’t also merge my includes into a single flat html file. I realized later I’d likely need to use both Jekyll AND Gulp, for flat files and sass + reloads respectively. That’s when I just went back to doing things the hard way. Sass save + quit server + restart server + refresh browser.

I’m going to utilize your posted gulpfile.js code but I’ll need to modify it to ignore a bunch of existing Bootstrap stuff. The other thing I notice is that Bootstrap already has a package.json file: https://github.com/twbs/bootstrap/blob/v4-dev/package.json

So I’m not sure what I would need to modify in the .json for purposes of running the aforementioned gulpfile.

I went ahead and ran $ gulp anyway, and got the following error:

[12:09:42] Starting 'jekyll-build'...
[12:09:42] Starting 'watch'...
[12:09:44] Finished 'watch' after 1.98 s
events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: spawn jekyll.bat ENOENT
   etc etc

I researched this a bit and found this fix:

// pick jekyll command based on platform
var jekyll = process.platform === "win32" ? "jekyll.bat" : "jekyll";

/** * Build the Jekyll Site */
gulp.task('jekyll-build', function (done)
{
    browserSync.notify(messages.jekyllBuild);
    return cp.spawn('jekyll', ['build'], {stdio: 'inherit'}).on('close', done);
});

…and PRESTO! Holy cow this refreshes fast. This is huge. Thanks again for all your help! Lifesaver!

6

haha - glad it worked!

I still think everyone works on windows, nice catch on that if statement, I should add that to mine so when I share it it is a little more workable.

You just need one package.json, but it needs to include all the dependencies for everything.Kind of sounds like what you needed was in it already. If it isn’t it will error and you can just manually install them until it works.