Load a css file to node dynamically from browser

Question

I need to create a mechanism that enable a designer to add css file to deployed app from browser. I am thinking of an page with file load to load a css file or a form to upload plain css code. then the app can load the css code dynamically to the app and change the style.

is this possible?

Edit: the css files doesn't exist, I want to create a mechanism that allow user to submit css classes in a form as text, and this new text get loaded to the app automatically.

Answer 1

Yes, that is possible. Here's a crude way to go about it:

1. Have a page to collect the CSS text.
2. Post the CSS text to the server.
3. Save the CSS text as a file on the server to a folder available to the internet.
4. Add the URL of the newly created CSS file to all the HTML files that needs it.
5. Finalize the server request.

If you followed the steps above correctly, the user that submitted the CSS text should now see the new style on the page. If they don't, it's probably because:

• The CSS file is not publicly available, make sure it's saved to the correct (public) folder.
• The CSS text is invalid, maybe look into a CSS parser to verify the CSS text submitted is valid.
• The server has gotten the mimetype of file wrong, check to make sure .css files are being served with a mimetype of text/css.
• There might have been a previous CSS file with the same name and the browser/server are still serving from cache, try appending a timestamp to the end of the filename when saving it (i.e. mycssfile.css?v=24353451) to eliminate this possibility.

I hope that helps!