playframework - TypeScript、SASS、および連結を Play プロジェクトに統合するにはどうすればよいですか?

Question

ここに私が持っているものがあります:

• TypeScript で記述されたクライアント側アプリケーション ロジック
• 私の SASS スタイルシート
• 独自のプレーン JS および CSS を使用したさまざまなサードパーティ コンポーネント

これらすべてを 1 つの JS ファイルと 1 つの CSS ファイルに組み込みたいと考えています。TS ファイルの JS が含まれる順序を指定できるようにする必要があります。私のディレクトリ構造は標準です これらでプレイ：

.
├── app
│   ├── assets
│   │   └── js
│   │       ├── build.ts
│   │       ├── components
│   │       │   └── test.ts
│   │       ├── messaging.ts
│   │       ├── main.ts
│   │       └── vue.d.ts
└── public
    ├── css
    │   └── *.css
    ├── dashboard
    │   ├── assets
    │   │   └── <some component>
    │   │       ├── *.css
    │   │       └── *.min.js
    ├── fonts
    │   └── *.{otf,svg,ttf,woff,woff2}
    ├── images
    │   └── *.{jpg.png}
    └── js
        └── *.min.js

私は持っsbt-typescriptてsbt-rjsインストールしました、そしてこれは標準の最後にありますbuild.sbt:

JsEngineKeys.engineType := JsEngineKeys.EngineType.Node

TypescriptKeys.moduleKind in TypescriptKeys.typescript := "amd"

pipelineStages := Seq(rjs)

//RjsKeys.appDir := file(".")
RjsKeys.mainConfig := "build"
RjsKeys.mainModule := "main"

それbuild.tsは次のようになります。

({
    baseUrl: ".",
    paths: {
    },
    name: "main",
    out: "main-built.js"
})

そして私のHTMLには次のものがあります：

<script data-main="@routes.Assets.versioned("js/main.js")" type="text/javascript" src="@routes.Assets.versioned("lib/requirejs/require.js")"></script>

それはすべて非常にうまくまとめられています (私は以前に TypeScript や RequireJS を使用したことがありません) が、開発ビルドと製品ビルドの両方で、私の TypeScript ビットで機能するようです。(SASS はまだ追加していません。)

これがこれまでのところ正しいアプローチである場合、開発と運用で引き続き機能するように他のすべてを組み込む正しい方法は何ですか? RequireJS 用に別のビルド プロファイルsbt-concatを作成する必要がありますか?