javascript - Automatically embed a stylesheet in HTML -
i'm building out error pages (404/503) need standalone html files, server-side nodejs, these files hosted directly in nginx. i'm trying automatically embed stylesheet @ top of html document , wondering whether there tools purpose. searching on stack overflow , google keeps returning tools inline css use in emails, not want.
i start out with
before.css
.body { color: black } before.html
<!doctype html> <html> <head> <title>a question</title> <link rel="stylesheet" href="before.css"> </head> <body> <p>here answer</p> </body> </html> which once process complete end with
after.html
<!doctype html> <html> <head> <title>a question</title> <style>.body { color: black }</style> </head> <body> <p>here answer</p> </body> </html> the ideal solution gulp plugin or idea of how write one.
can write in js if needed. i'm using ejs , stylus derive original before files.
many thanks
as many commented, you're trying find solution complex problem , there many easy use workarounds this. if want here few approaches think best:
server-side templates:
the best, clean , straightforward method of embedding stylesheet html use server-side scripting language (as @mr_green pointed out). there many chose from, , you're using node.js, best library ejs or jade. can use php, ruby, python or whatever think best, idea same:
- first, need read contents stylesheet , store in variable. in node.js can use
fs.readfile()read contents of .css file. - then, have output contents of .css file (stored in variable) html. ejs example, if contents of css file in variable
stylefile, can<style><%= stylefile %></style>directly put contents of stylesheet html<style>tag.
using ajax javascript:
another solution use ajax , contents of stylesheet , use javascript put inside <style> tag. example jquery do: $("style").html(// stylesheet contents var);.
of course can use haml, if helps.
hope answers question.
Comments
Post a Comment