はじめに
こんにちは。
こちらの記事では、Playframework に scss を導入する方法を記しています。
すこしでも参考になれば嬉しいです！
実装手順
- app/assets ディレクトリ以下に scss ファイルを配置する。
- sbt-sassify のプラグインを plugin.sbt に追記する。
- main.scss に複数の scss ファイルを import しておく。
app/assets ディレクトリ以下に scss ファイルを配置する。
ディレクトリ構成は以下のようにしております。
scssファイルを配置する際は、必ず app/assets ディレクトリ以下 に配置するようにしてください。
（public 以下に配置したところ、うまくコンパイルが通らずエラーになってしまうため）
app
└ assets
└ stylesheet
└ main.scss
└ page
└ top.scss
└ utils
└ _reset.scss
└ _layout.scss
sbt-sassify のプラグインを plugin.sbt に追記する。
sbt-sassify を利用できるように、 project/plugins.sbt ファイルに下記を追記しておきます。
このプラグインを追加しておくことで、sbt 起動時に scss ファイルがコンパイルされるようになります。
project/plugins.sbt
addSbtPlugin("io.github.irundaia" % "sbt-sassify" % "1.5.2")
main.scss に複数の scss ファイルを import しておく。
複数の scss ファイルを作成していくと思うので、 main.scss ファイルに import しておきます。
これにより import したファイルで sass の記法が使えるようになります。
エラーの原因になるので、import の最後には ; をつけておきましょう。
main.scss
@import "utils/reset";
@import "utils/layout";
@import "page/top";
css が読み込まれる .scala.html ファイルには、 stylesheet/main.css を指定しておきましょう。 main.css ファイルは、 main.scss ファイルがコンパイルされると作成されるファイルなので、新たに作成する必要はないです。
app/views/main.scala.html
<link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheet/main.css")">
参考
おわりに
ここまでPlayframework に sass を導入する方法についてまとめました。
Qiitaの記事とドキュメントを参考にしたおかげで、意外と簡単に導入することができました！！！
以上、最後まで読んでいただきありがとうございました！