3

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

4

1 回答 1

9

这是您需要的（它看起来很挑剔，但不要害怕，值得）：

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

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

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

  • 现在样式以 10 年前的方式导入，您可以使用兼容的工具来覆盖样式以允许实时编辑。一个简单的但仅适用于 css 的是众所周知的 Espresso（以前称为 CSSEdit），打开页面并覆盖样式……但目前不支持 .scss 文件。

使用流星实时编辑 .scss 文件：

  • 为此，您需要使用 Sublime Text 2 或 3 作为编辑器，您可以在此处获取：http: //www.sublimetext.com/3它不是免费的，但没有功能和时间限制。因此，如果您继续使用它，只需购买它以支持开发人员团队。
  • 您将需要很棒的工具来启用 takana 的实时版本，请在此处获取：https ://github.com/mechio/takana

那个takana真是太棒了！概念如下：一旦安装并运行，它将创建一个与 sublimetext 编辑器交互的服务器，然后要求您在代码中添加一个 js 片段，以便浏览器与 takana 服务器连接并重新加载 .css 或.scss 文件实时，无需重新启动流星。要使用 takana 设置流星项目，只需执行以下操作：

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

一切就绪，现在可以使用它了

  • 在第二个终端启动你的流星项目。来自正确路径的命令meteor……</li>
  • 打开任何浏览器到您的流星页面，即可能http://localhost:3000
  • 打开 sublimetext，尝试编辑您的style.css文件，css 更改会自动显示在浏览器页面上，而不保存任何内容。
  • 这也适用于 .scss 文件。只需将其重命名style.css为style.css.scss并在崇高的文本中进行编辑。奇迹发生了，您正在使用流星应用程序上的实时结果编辑 scss 文件，而无需重新加载任何内容。

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

最后但并非最不重要的一点是：您可以在多个浏览器中打开项目并在 SublimeText 中编辑文件时看到它们实时刷新，它也适用于 Safari、FF 但由于某些原因我不得不使用“Google Chrome Canary”代替的“铬”。如果您让它在其他浏览器（例如 IE、Opera）上运行，或者即使它与您计算机上的常规“Chrome”一起运行，请发表评论。

于 2014-03-31T06:52:57.080 回答