如何在Google Polymer中正确使用coffeescript / sass（已编译语言）？

Question

我真的对CoffeeScript和Sass都是陌生的，但是我试图与他们和Google Polymer一起完成一个测试项目，以便对它们更加熟悉。 但是，我对如何设置项目有些困惑。

在带有Google Polymer的custom-elements的示例中，他们使用嵌入式Javascript代码来初始化元素，如下所示：

<script>
  Polymer ({
    is: 'id-here'
  });
</script>

一切都很好，但是这不适用于CoffeeScript，在使用前我必须将其编译为JS。 包括这样的最佳做法是什么？

Polymer
  is: "id-here"
  properties:
    etc

—在我的项目中使用外部CoffeeScript文件而不是嵌入式Javascript代码吗？ 最好将外部已编译的.js文件加载到我的custom-element还是在每次使用自定义元素时尝试加载它？

我也不确定我应该如何将sass与自定义元素一起使用，因为它们也在使用前进行了编译。

在这里非常困惑，如果将有关在Google Polymer中使用已编译语言的任何帮助或文档，将不胜感激，因为Google搜索没有任何帮助。 谢谢！

Answer 1

将文件分开。 分别处理它们。 最后将它们组合为构建步骤。

聚合物元素示例：

<dom-module id="foo-bar" assetpath="/">
  <template>
    <link rel="Stylesheet" media="all" href="foo-bar.css" />
    <div>[[formatName(name)]]
    <div>[[employer]]
    <template is="dom-repeat" items="[[addresses]]">
      <div>[[item.street]</div>
      <div>[[item.city]], [[item.state]] [[item.zip]]</div>
    </template>
  </template>
  <script src="foo-bar.js"></script>
</dom-module>

现在，您可以使用coffeescript / typescript / etc生成foo-bar.js文件。 Sass / Less / etc创建您的foo-bar.css文件。

在最终构建期间，Vulcanize之类的工具可以内联所有生成的文件。