Updating main.css doesn't trigger live reload

[megavolkan]

Editing /assets/css/main.css. Trying to add custom styles after /* Add Your Custom CSS Here */ comment line. Server is running, yet editing main.css file doesn't trigger a live-reload. Editing any html or even /assets/js/main.js does trigger live reload. Is this expected?

[tnylea]

@megavolkan you're correct that should be hot reloading when a change is made; however, that's not what is happening.

You can see that inside of src/dev.js https://github.com/thedevdojo/static/blob/main/src/dev.js#L32

We are specifying the extensions we want to watch for:

const liveReloadOptions = {
    port: liveReloadAvailablePort,
    exts: ['html', 'css', 'js', 'png', 'gif', 'jpg', 'md']
};

In the next lines we create the LiveReload server and loop through a few folders to watch for:

const liveReloadServer = livereload.createServer(liveReloadOptions);

for(let i = 0; i < staticFoldersToWatch.length; i++){
    liveReloadServer.watch(currentDirectory + "/" + staticFoldersToWatch[i] + "/**/*");
}

The assets folder is inside of the staticFoldersToWatch array at the top of the file:

const staticFoldersToWatch = ['assets', 'collections', 'content', 'includes', 'layouts', 'pages', 'public'];

So, you are correct that it is not working as intended.

The weird thing is that I can add a file at /assets/css/test.html and when I make updates to that file it livereloads. So for some reason it's not respecting the exts list.

I've double checked that this is the recommended way to use this library. Here is the livereload library that Static is using: https://www.npmjs.com/package/livereload https://github.com/napcs/node-livereload

I've spent about an hour trying to debug with no luck, so I'll have to give it another try soon and dig a little deeper.

Feel free to try and debug if you have some extra time. To do so you can git clone this repo onto your machine and run npm install

https://github.com/thedevdojo/static.git
cd static
npm install

Then, you can run:

npm link

This command will link the code from that folder to the static command. When you want to unlink you can run:

npm unlink

No worries if you can't debug. I'll be sure to give it another debugging try over the weekend 🤜🤛

Talk to you soon.

[megavolkan]

Hi, is there any progress? I have tried a few thing, yet they did not work either. Removed tailwind altogether (not a huge fan o it). Added additional .css files to the /assets folder and run 'static build' but additional css files are not compiled into the _site folder, only main.css. I suppose build process is not watching /assets/css folder other than main.css file. On the other hand /assets/js folder is watched and compiled without a problem. I really do want to use Static, for its simplicity, file based routing and other bells and whistles but I think it has a long way ahead.