hylia icon indicating copy to clipboard operation
hylia copied to clipboard

Updating .scss files does not trigger 11ty rebuild / Browsersync update

Open zplume opened this issue 5 years ago • 2 comments

Hi @hankchizljaw,

I've noticed that updating *.scss files doesn't trigger an 11ty rebuild while running npm start and testing on http://localhost. This means that those changes aren't automatically reflected in your browser by Browsersync.

To see *.scss changes in your browser while tweaking styles and testing on http://localhost, you need to re-run npm start.

I have created a fork of Hylia with a browsersync-scss branch containing the following changes:

  • Configure 11ty to watch src/_includes/assets/css/global.css (so that 11ty rebuilds your site when that file changes).
  • Tell 11ty not to use .gitignore for determining which files not to watch (as this would otherwise prevent 11ty watching global.css for changes).
  • Add a .eleventyignore file with relevant list of paths for 11ty to ignore.

With those changes, you can test on http://localhost, make changes to *.scss files, and those changes are reflected almost instantly in your browser by Browsersync.

Is this a change you think would be worth submitting as a PR? If so, are there any changes needed in the browsersync-scss branch?

Thanks!

zplume avatar Jun 19 '20 09:06 zplume

I've updated the browsersync-scss branch to remove my pnpm-lock.yaml file.

zplume avatar Jun 19 '20 10:06 zplume

Howdy! I think I'm going to rip out the current Sass implementation in the future and replace it with the Gulp setup that I created for my Eleventy course instead.

I appreciate you flagging this up though :)

Andy-set-studio avatar Jun 19 '20 12:06 Andy-set-studio