实时css/scss版本与流星避免服务器重启

前端之家收集整理的这篇文章主要介绍了实时css/scss版本与流星避免服务器重启前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在使用meteor构建大型应用程序时,我们确实面临编辑样式表文件的常规问题.编辑完一个文件后,整个应用程序会重新加载,每次进行一点改动都需要花费时间.一个大项目暗含了复杂的css文件.出于这个原因,我选择使用sass来构建它们,并在开发处理中更有效率.我正在寻找的是一个工作流程,我可以在编辑器中更改.scss文件,并在我的流星应用程序中实时查看结果.

解决方法

这就是你需要的东西(它看起来很挑剔,但不要害怕,值得):

设置项目以外部化.css文件

> Meteor将所有.css文件编译成一个单片文件,大多数css编辑器都没有预料到这种行为.对于开发阶段,我建议使用传统的方法将样式表包含在html页面本身.这样做:

>在meteor项目的根目录中创建一个公共文件夹:meteorProject / public
>将css文件添加到此文件夹中:meteorProject / public / style.css
>在主HTML代码中导入样式表< link rel =“stylesheet”type =“text / css”href =“/ style.css”/>

你做了什么 ?您创建了一个可通过路径localhost:3000 /访问的公共存储库,然后将样式表style.css添加到此存储库,该存储库通过相对路径/style.css可用.通过使用这种技术,meteor不会编译既不包含项目样式表,也只是使用链接标记以常规方式手动加载它.现在是配置编辑器的时候了.

>现在风格按照10年前的方式导入,您可以使用兼容的工具来覆盖样式以允许实时编辑.一个简单但只有css的是众所周知的Espresso(以前的CSSEdit),打开页面并覆盖样式……但是那个目前不支持.scss文件.

使用meteor实时编辑.scss文件

>要实现这一点,你需要使用Sublime Text 2或3作为编辑器,你可以在这里得到它:http://www.sublimetext.com/3它不是免费的,但没有功能也没有时间限制.因此,如果您继续使用它,只需购买它以支持开发人员团队.
>你需要一个很棒的工具来允许真人版本的takana,在这里得到它:https://github.com/mechio/takana

那个takana吓人!这个概念如下:一旦安装并运行它将创建一个与sublimetext编辑器交互的服务器,然后你被要求在你的代码添加一个js片段,以便浏览器与takana服务器连接并重新加载.css或.scss文件实时无需重启meteor.
要使用takana设置流星项目,请执行以下操作:

>打开终端
> sudo npm install -g takana(如果需要,请输入密码)
>通过提供上面创建的meteorProject / public文件夹的绝对路径,在另一个终端中启动takana可能看起来像:takana / Users / aUser / meteorProject / public
>在主html页面添加js snippet< script type =“text / javascript”src =“http:// localhost:48626 / takana.js”>< / script>

你已经准备好了,现在就可以使用了

>在第二个终端启动您的流星项目.从正确的道路命令流星……
>打开任何浏览器到你的流星页面,也就是http:// localhost:3000
>打开sublimetext,尝试编辑style.css文件,css更改会自动显示在浏览器页面上而不保存任何内容.
>这也适用于.scss文件.只需将style.css重命名为style.css.scss并在sublime文本中进行编辑即可.这里发生了神奇的事情,你正在流星应用程序上编辑带有实时结果的scss文件而无需重新加载任何内容.

一旦您对结果感到满意,您可以将.scss编译为.css文件并以常规方式将其添加到项目中,或者使用meteor .scss包,它将在每次重新启动时为您执行此操作.注意:在生产中,不要忘记将js和样式代码删除一段代码.

最后但并非最不重要的一点:您可以在多个浏览器中打开项目并在SublimeText中编辑文件时看到它们在实时刷新,它也适用于Safari,FF但由于某些原因我不得不使用“Google Chrome Canary”代替“Chrome”.如果您在其他浏览器(如IE,Opera)上工作,或者即使它与计算机上的常规“Chrome”配合使用,请发表评论.

原文链接:https://www.f2er.com/css/217936.html

猜你在找的CSS相关文章