How do I integrate TypeScript, SASS and concatenation into my Play project?

Question

Here's what I have:

• client-side application logic written in TypeScript
• my SASS stylesheets
• various third-party components with their own plain JS and CSS

I'd like to have all that build into a single JS file and a single CSS file. I'd need to be able to specify the order that the JS from my TS files gets included. My directory structure is standard Play with these:

.
├── 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

I have sbt-typescript and sbt-rjs installed, and this at the end of the standard 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"

That build.ts looks like this:

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

And in my HTML I have:

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

It's all quite cobbled together (I've never used TypeScript or RequireJS before), but it seems to work for my TypeScript bits in both dev and production build. (I haven't added SASS yet.)

If this is the right approach so far, what is the correct way to incorporate everything else so that it still works in dev and production? Do I write another build profile for RequireJS, or should I just use sbt-concat?