使用npm包将css文件转换为HTML内联样式

Question

I have HTML file with external css file, like to inline the styles in external style sheet into one inline <style> tag at the top of the head . 我有带有外部css文件的HTML文件，喜欢将外部样式表中的样式内联到顶部的一个内联<style>标签中。 Thanks in advance for any help 预先感谢您的任何帮助

Note : Do not want to use style attribute applied to each element, want to have one style tag at the top 注意：不想使用应用于每个元素的样式属性，想要在顶部具有一个样式标签

Before Converting 转换之前

 p { color: red; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML Template</title> <link rel="stylesheet" type="text/css" href="css/mystyle.css"> <script type="text/javascript" src="js/myscript.js"></script> </head> <body> <p>Welcome to Template!!</p> </body> </html>

After Converting 转换后

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML Template</title> <!-- START: Replaced inline tag from external css file mystyle.css as above--> <style> .p { color: red } </style> <!-- END: Replaced inline tag from external css file mystyle.css as above--> <script type="text/javascript" src="js/myscript.js"></script> </head> <body> <p>Welcome to Template!!</p> </body> </html>

Answer 1

You can start by make your html file accessible from web browser if you use php, you can make it accessible by run following command php -S 127.0.0.1:4000 , make sure you can access it by open localhost:4000 on your web browser, there are another way how to accessible from another languages, but it's out of the scope of this question 如果使用php，可以先从Web浏览器访问html文件，然后通过运行以下命令php -S 127.0.0.1:4000使其可访问，确保可以通过在Web浏览器上打开localhost：4000来访问它。，还有另一种方法可以从其他语言进行访问，但这超出了此问题的范围

the second step is install inliner npm package npm install -g inliner 第二步是安装inliner npm软件包npm install -g inliner

and execute inliner http://localhost:4000 > output.html 并执行inliner http://localhost:4000 > output.html

open output.html to see the result 打开output.html以查看结果

execute inliner -i http://localhost:4000 > output.html if you don't want to convert the image to be base64 encoded 如果您不想将图像转换为base64编码，请执行inliner -i http://localhost:4000 > output.html

使用npm包将css文件转换为HTML内联样式

问题描述

1 个解决方案

解决方案1
0 2018-03-10 08:42:58

使用npm包将css文件转换为HTML内联样式

问题描述

1 个解决方案

解决方案1 0 2018-03-10 08:42:58

解决方案1
0 2018-03-10 08:42:58