13

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.

Brian Ball
  • 12,268
  • 3
  • 40
  • 51
  • There are several SASS plugins for SystemJS, but all of them presume that JSPM is used in the setup as well. A proven solution for SystemJS alone would be welcome – Estus Flask Oct 10 '16 at 15:22
  • I've used JSPM in a very limited capacity before. My undrestanding of it is that it was mostly used to manage packages/aliasing, managing the systemjs config file, etc. I thought when the "rubber hit the road" (e.g. running the web application), that JSPM did not have an active role. – Brian Ball Oct 10 '16 at 15:41
  • It isn't clear how the plugin should be installed in this case in the first place. Here's an example https://github.com/mobilexag/plugin-sass – Estus Flask Oct 10 '16 at 16:00
  • @estus As for me plugin description is clear. Do you decribe your dificulties in more details? – Mikhail Vitik Oct 17 '16 at 08:27
  • 1
    @MikeVitik Yes, the description presumes that JSPM is used in the setup. I'm interested how it can be used without JSPM (in Plunker, for instance). – Estus Flask Oct 17 '16 at 11:10

1 Answers1

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.

Community
  • 1
  • 1
Valentyn Shybanov
  • 19,331
  • 7
  • 66
  • 59