とりあえずやってミタ

とりあえず技術的っぽいことをいろいろやってみるブログ

MojoliciousでSassを使う

   

MojoliciousでSassを使うときのメモ

MojoliciousでSassを使いたいときに利用できるPlugin(2015/5現在)

最後の”Plugin::Sass”はメンテが止まっており、sassを外部ファイルにできなさそうだったので試していない

Mojolicious::Plugin::Sass-Renderer

main.plにはプラグインの指定のみ templateディレクトリの下に”sass”ディレクトリなどを作って中に”main.sass”を保存、 htmlのheadに以下を記述

サーバーを起動してアプリにアクセスするとhtmlのheadの該当箇所に”main.sass”の内容がcssにデコードして出力されているのを確認できる

問題点

  • sassのみ、scssは未対応
  • media queryがうまく機能しない

Mojolicious::Plugin::AssetPack

“public/sass/main.scss”を用意したら、main.plに以下のように記述

htmlヘッダの箇所に以下を記述。(ここで記述するcssファイル名は上のassetで指定したcssファイル名)

なおデフォルトではキャッシュが効いており、sassファイルを編集してもリアルタイムで内容が反映されずにサーバーの再起動が必要になる。
変数”MOJO_ASSETPACK_NO_CACHE”に1を入れてサーバーを起動するとキャッシュは無効になる。

キャッシュが効いてるときは、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

 - メモ ,

  関連記事