Edited at

PlayFramework2.2.0 でSassを使用する

More than 5 years have passed since last update.

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

// とのご指摘を受けました。(未確認)

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が展開されます

※プロダクションモードだと最初から展開してくれるかは未調査


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

// scss->cssに展開されている

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