css - meteor 避免服务器重启的实时 css/scss 版本

Question

在使用 meteor 构建大型应用程序时，我们确实面临着编辑样式表文件的常规问题。编辑文件后，整个应用程序都会重新加载，每次进行一点更改都需要时间。大型元素隐含着复杂的 css 文件。出于这个原因，我选择使用 sass 来构建它们并在开发过程中更有效率。我正在寻找的是一个工作流程，我可以在其中更改编辑器中的 .scss 文件并在我的 meteor 应用程序中实时查看结果。

Answer 1

这是你需要的(看起来很挑剔，但不要害怕，值得):

设置您的元素以外部化 .css 文件

• Meteor 将所有 .css 文件编译成一个整体文件，大多数 css 编辑器都不会期望这种行为。对于开发阶段，我建议使用将样式表包含到 html 页面本身的传统方法。这样做:
  • 在 meteor 元素的根目录中创建一个公用文件夹:meteorProject/public
  • 在这个文件夹中添加一个 css 文件:meteorProject/public/style.css
  • 在您的主要 html 代码中导入样式表 <link rel="stylesheet" type="text/css" href="/style.css" />

你做了什么？您创建了一个公共(public)存储库，可通过路径 localhost:3000/ 访问然后您将样式表 style.css 添加到此存储库，该样式表可通过相对路径 /style.css 使用。 .通过使用这种技术，meteor 将不会编译，也不会将样式表本身包含到您的元素中，您只需使用 link 以常规方式手动加载它。标签。现在是配置编辑器的时候了。

• 现在样式已按照 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 设置 meteor 元素，只需执行以下操作:

• 打开终端
• sudo npm install -g takana (如果需要，请输入您的密码)
• 通过提供 meteorProject/public 的绝对路径在另一个终端启动 takana上面创建的文件夹可能类似于:takana /Users/aUser/meteorProject/public
• 将 js 片段 <script type="text/javascript" src="http://localhost:48626/takana.js"></script> 添加到您的主 html 页面

你已经准备好了，现在可以使用它了

• 在第二个终端启动您的 meteor 元素。命令 meteor从正确的道路上……
• 打开任何浏览器到您的 meteor 页面，即可能是 http://localhost:3000
• 打开 sublimetext，尝试编辑你的 style.css文件，css 更改会自动显示在浏览器页面上，无需保存任何内容。
• 这也适用于 .scss 文件。只需重命名 style.css至 style.css.scss并在 sublime text 中编辑它。奇迹发生了，您正在 meteor 应用程序上编辑具有实时结果的 scss 文件，而无需重新加载任何内容。

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

最后但同样重要的是:您可以在多个浏览器中打开元素并在 SublimeText 中编辑文件时看到它们实时刷新，它在 Safari、FF 上也能正常工作，但由于某些原因我不得不使用“Google Chrome金丝雀”而不是“Chrome”。如果您让它在其他浏览器(如 IE、Opera)上工作，或者即使它在您计算机上与常规“Chrome”一起工作，请发表评论。