将CSS注入现有网站,无需访问ftp并使用实时重新加载

时间:2014-12-03 10:08:09

标签: javascript html css google-chrome-devtools

我们的客户向我们提供了一个现有的网站,我们必须重新安排。问题是,我们无法上传我们的css文件,客户端也没有授权我们访问她的网络服务器。因此,我们必须向她发送最终的css,然后将其包括在内。

当前工作流程

scss文件> gulp watch>在chrome的开发人员工具中通过javascript将css插入网站

实时重新加载css无法使用此设置,我想知道是否有更好的解决方案来设置开发人员无法访问的现有网站的样式。

2 个答案:

答案 0 :(得分:1)

尝试https://github.com/One-com/livestyle

我们为此目的建造了它。它将livereload客户端脚本注入到通过服务器的任何html中,因此您不需要处理它。它还能够像你一样编译sass,并在向远程服务器代理任何其他内容时从本地文件系统提供css。

您需要的命令行是这样的:livestyle -r path/to/webroot --proxy http://clientwebsite.com --compilesass --autoprefixer

如果本地Web根目录中的文件路径是远程css文件的镜像,则此方法将起作用。如果您需要更复杂的设置,则可能需要深入研究映射目录:https://github.com/One-com/livestyle#--map-m-sourcepathprefixtargetpathprefix

答案 1 :(得分:0)

我认为您最好的选择是使用UserScripts。 如果您阅读userscripts,这完全有可能使用一些JavaScript注入一个重置css文件,然后将您的自定义css注入您定义的网站。

Firefox的Stylish extension也允许这样做。我不知道IE中是否有类似的功能。

以下是适用于chrome的Stylish扩展程序的link

另一种选择是将整个网站保存到您的电脑上,然后在本地环境中自己托管并编辑css。 当您满意时,您可以将css发送给您的客户,他/她可以将其上传到网络服务器。