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向けプラグイン）を導入する
まずは、プラグインの設定を行います。
//以下を追記
resolvers += "Sonatype OSS Releases" at "https://oss.sonatype.org/content/repositories/releases"
addSbtPlugin("net.litola" % "play-sass" % "0.3.0")
次に、プロジェクトのビルド設定を行います
ここで理解しておらず嵌りました。
以下のコメントを参考に設定する必要があります。
// 使用するにあたって、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
// とのご指摘を受けました。（未確認）
scala:{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が展開されます
※プロダクションモードだと最初から展開してくれるかは未調査
// scss->cssに展開されている
a {
font-weight: bold; }
a:hover {
text-decoration: none; }