How to integrate Sass and Play 2.3?

Question

Is it possible to integrate Sass and Play Framework 2.3, so that Sass gets compiled to CSS? If so, how should I go about it? I\'ve tried the play-sass plugin, but it doesn\'t bu

Answer 1

You can try to use my sbt-sass plugin for play framework 2.3.

In future, i'll try to integrate plugin with js compiler. Now it works only with ruby-version of sass.

Link: https://github.com/ShaggyYeti/sbt-sass.

Answer 2

I could install the sass plugin using the following steps:

resolvers += "Madoushi sbt-plugins" at "https://dl.bintray.com/madoushi/sbt-plugins/"

addSbtPlugin("org.madoushi.sbt" % "sbt-sass" % "0.9.2")

I picked up the latest version from https://dl.bintray.com/madoushi/sbt-plugins/org.madoushi.sbt/sbt-sass/scala_2.10/sbt_0.13/

But i got some error during runtime.

Answer 3

As you probably know, Play has migrated to using sbt-web as the model for its asset pipeline, instead of the old system. It's much more flexible than the old system. Unfortunately, since it's so new, it also lacks whole lot of existing packages. You'll either have to write sbt-sass yourself or wait till someone else does. I'm in the same boat for migrating my project to Play 2.3.

From the Play Webinar on Tuesday, Christopher Hunt from Typesafe did a fully fledged example sbt-web plugin for stylus, and linked to the source here. Most of the logic is written Node-style in a JS script, with modules pulled from WebJars instead of NPM.

The two parts of the process that would have to be modified are in the JS file that the part for invoking Sass instead of Stylus and the part for parsing errors to pass back to Play. The latter is just editing the parseError function. The former you could either do by directly plugging in the code to invoke Sass or by adapting an existing Sass wrapper to WebJar form, as they did with Stylus, and using it in the same way. There are a couple on npm that might do the trick.

Edit I've been using the ShaggyYeti sbt-sass package for months now, to great effect. See the other answer.