MojoliciousでSassを使う
MojoliciousでSassを使うときのメモ
MojoliciousでSassを使いたいときに利用できるPlugin(2015/5現在)
最後の"Plugin::Sass"はメンテが止まっており、sassを外部ファイルにできなさそうだったので試していない
Mojolicious::Plugin::Sass-Renderer
main.plにはプラグインの指定のみ
plugin 'sass_renderer';
templateディレクトリの下に"sass"ディレクトリなどを作って中に"main.sass"を保存、
htmlのheadに以下を記述
<style type="text/css">
<%== include 'sass/main', format => 'txt', handler => 'sass' %>
</style>
サーバーを起動してアプリにアクセスするとhtmlのheadの該当箇所に"main.sass"の内容がcssにデコードして出力されているのを確認できる
問題点
- sassのみ、scssは未対応
- media queryがうまく機能しない
Mojolicious::Plugin::AssetPack
“public/sass/main.scss"を用意したら、main.plに以下のように記述
plugin 'AssetPack' => {minify => 1};
app->asset('main.css' => ('/sass/main.scss'));
app->start();
htmlヘッダの箇所に以下を記述。（ここで記述するcssファイル名は上のassetで指定したcssファイル名）
<head> <title>SAMPLE</title> %= asset main.css </head>
なおデフォルトではキャッシュが効いており、sassファイルを編集してもリアルタイムで内容が反映されずにサーバーの再起動が必要になる。
変数"MOJO_ASSETPACK_NO_CACHE"に1を入れてサーバーを起動するとキャッシュは無効になる。
$ MOJO_ASSETPACK_NO_CACHE=1 morbo myapp.pl
キャッシュが効いてるときは、public/packedの下にエンコードされたファイルが生成される。（base_urlを設定することでディレクトリの変更は可能）
herokuにデプロイする際の注意点
Plugin::Assetpackでは、sassのエンコードにgemパッケージの"sass"を使用しているのだが、herokuでMojoliciousアプリを使う際のbuildpackではGemfileを使ってのgemパッケージのインストールまでサポートしていないと思う。そのためこのままデプロイすると"cannot execute sass"のエラーが表示される。
“sass"の代替手段としてCSS::Sassを推奨しており、cpanfileに以下を追記してインストールする。（参考：Mojolicious::Plugin::AssetPack::Preprocessor::Sass）
requires "CSS::Sass";