How to implement css live reload?

Question

css

It is necessary to implement a change in css properties on the client in the browser, something like live css. But the implementation on client-side JS is apparently not suitable, since I need a separate css file with all the changes at the output. I need a web page with inputs and values, where I can change these variable values ​​​​to change certain css properties, style changes on the client occur simultaneously, and after making all the changes, click on the button and get the entire file with styles. How to implement it more kosherly, what technologies are there? The first thing that comes to mind is node.js, but how to implement live reload? I'm not good at this, so I'm asking the public for help. Point me to the right path, I will be very grateful.

Answer 1

If the style editor is on another page, then you can make a permanent connection via sockets (for example with http://socket.io) between the editor and the target page. After changes in the editor, an event will fly to replace styles. You can really save the file itself through nodejs, and the socket event can also be sent through the node to the final page.
With a node, you can also simply use http://www.browsersync.io, which will watch for a modified file that the node server itself will save.