Transpiling SASS on the fly with SystemJS

Question

I read a lot of blogs that say SystemJS and SASS transpiling works, but every example I see online appears to handle the SASS processing up front (via a gulp-like task runner), and the JavaScript code then imports the generated CSS.

What I'm hoping to be able to do is to have my JavaScript files import the SASS files directly (and have my SystemJS loader transpile into CSS on-the-fly). This is just for development purposes, for production, I plan to build a single static file with everything in it. Is this possible? If so, how is this typically done?

Additional info: I am using Angular2 and Typescript as well.

Thanks.

Answer 1

To have "on fly" transpiling SASS into CSS you need client-side SASS -> CSS transpiler.

According to this answer there is no official implementation that can help you.

Alternatively you can consider LESS instead of CASS (using this plugin for example), so you can have full client-side transpiling for development purposes and server-side pre-building via SystemJS Builder for production builds.