如何在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之類的工具可以內聯所有生成的文件。