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";