PlayFramework2.2.0 でSassを使用する

PlayFrameworkでSassを使おうとして時間を浪費したのでメモ。。。
Sbtもあまり理解できていない状態でやると色々捗らないですね。

#環境
MacOS X (10.9)なので、Windowsの場合は分かりません。

#やりたいこと
タイトルの通り、PlayFrameworkでSassを利用する
※Eclipseとの連携は？という疑問を持つ人もいるかもしれませんが、
　sbtとplay-sass、sassだけで完結します。

#手順
##Sassを導入する
最終的にはPlayFramework向けのプラグインを利用するのですが、
その前にSass本体が必要となります。

$ sudo gem install sass
※3.2.12が入りました。

##play-sass（PlayFramewor向けプラグイン）を導入する
Github:play-sass

###まずは、プラグインの設定を行います。

{yourProjectName}/project/plugins.sbt

//以下を追記

resolvers += "Sonatype OSS Releases" at "https://oss.sonatype.org/content/repositories/releases"

addSbtPlugin("net.litola" % "play-sass" % "0.3.0")

###次に、プロジェクトのビルド設定を行います
ここで理解しておらず嵌りました。
以下のコメントを参考に設定する必要があります。

{yourProjectName}/project/plugins.sbt

// 使用するにあたって、importを宣言するのですが、
// 理解している人には当然なのかもしれませんが、
// 行頭で宣言する必要があります。
// ググると2.0,2.1系や1.x系の設定例ばかり出ているので注意が必要です。
import net.litola.SassPlugin

// 他の設定は私的な設定なので無視してください。
// --- ここから
name := "Inco"

version := "1.0-SNAPSHOT"

libraryDependencies ++= Seq(
  jdbc,
  anorm,
  cache
)     

libraryDependencies += "org.scalatest" % "scalatest_2.10" % "2.0.RC3" % "test"

libraryDependencies += "org.scalaz" %% "scalaz-core" % "6.0.3" // scalazを有効にしてます
// --- ここまで

// これも追加
play.Project.playScalaSettings ++ SassPlugin.sassSettings

##Sassを使ってみる
正直、Sassもこれから勉強なので詳しくないのですが、
例えば、
main.scss としてファイルを作ると、ビルドによって
main.min.css と main.css
が作成されます。

適当にsassを作成
※asstesに置くのはルールだと思ってください。

// scala:{yourProjectName}/assets/stylesheet/main.scss
// ではなく、
// scala:{yourProjectName}/app/assets/stylesheet/main.scss
// とのご指摘を受けました。（未確認）

{yourProjectName}/assets/stylesheet/main.scss

a{
     font-weight: bold;
     &:hover{
          text-decoration: none;
     }
}

###htlm上でcss（scss）を呼び出します

<!-- こんな感じ -->
<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">

###画面アクセス時に、以下のパスへcssが展開されます
※プロダクションモードだと最初から展開してくれるかは未調査

{yourProjectName}/target/scala-2.10/resource_managed/main/public/stylesheet/main.css

// scss->cssに展開されている
a {
  font-weight: bold; }
a:hover {
  text-decoration: none; }