PlayFrameworkでSassを使う方法(簡単)

こんにちは！
見て頂きありがとうございます！！

都内のベンチャー企業でエンジニア1年生(2ヶ月目)をしているjunと申します。

記念すべき初のQitaの投稿です。

今回PlayFrameWorkにSassを導入してみたので自分のメモがてら紹介したいと思います。

参考にしたサイト

Play公式ドキュメント

実行環境

• PlayFramework 2.8.2
• Scala 2.13.3

まずPlayでSassを有効化するためにplugin.sbtに以下を追記してください

plugin.sbt
addSbtPlugin("org.irundaia.sbt" % "sbt-sassify" % "1.4.11")

これで準備OKです。

ファイル構成

app
 └ assets
   └ stylesheets
     └ main.scss
     └ modules
       └ _reset.scss
       └ _layout.scss

まず、appフォルダ直下にassetsフォルダを作成します。
assetフォルダ直下にmain.scssを配置します。
このmain.scssがマスターのscssファイルとなります。
modulesフォルダ以下にいわゆるmoduleを作成していきます。

元々publicフォルダにあったmain.cssは削除しておいた方が良いかもしれません。
てかむしろ削除しておかないと、同じファイルが生成されているよって感じてエラーがでます。。

modulesフォルダ以下を読み込むには、
main.scssフォルダに以下のように記述すればOKです。

/main.scss

@import "modules/_reset"
@import "modules/layout"

~~以下Scss記述
.header {
　~~
}

このあたりは通常のSassの書き方と同じですね。

ちなみにviewsのmain.scala.htmlファイル内の

 <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/main.css")">

は変更しなくてもいけました。

結局コンパイルされてmain.scss →　main.cssになるの変更しなくてもいけるぽいですね。

これで終わりです笑
難しいと思いましたが、意外と簡単でした。
簡単ですが終わります。

誰かの参考になれば幸いです。