July 10, 2014

Symfony 2でCompassを使う

compassをインストールする(入っていない場合)。

$ gem install compass

Symfonyプロジェクトのapp/config/config.ymlでassetic.bundlesにバンドル名を入れてAsseticを有効にする。ここでは例としてAcmeDemoBundleとする。

assetic:
  bundles: [ AcmeDemoBundle ]

さらにassetic.filters.compass.apply_toで.sassと.scssの拡張子を指定する。こうすると、.sassと.scssの拡張子に対してcompassが自動的に実行されるようになる。

assetic:
  bundles: [ AcmeDemoBundle ]
  filters:
    compass:
      apply_to: "\.s[ac]ss$"

スタイルシートを作成する。ここでは例としてsite.scssとする。

src/Acme/DemoBundle/Resources/public/css/site.scss:

table {
  border-collapse: collapse;

  thead td {
    padding: 5px;
    background-color: #f0f0f0;
  }

  tbody td {
    padding: 10px;
    border-bottom: 1px solid #ccc;
  }
}

Twigテンプレートに以下のように埋め込んで完了。

{% stylesheets "@AcmeDemoBundle/Resources/public/css/site.scss" %}
  <link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}

/usr/bin/rubyが存在しかつrbenvを使用している場合などで、rbenv: not foundno Ruby script found in input (LoadError)といった500エラーが出ることがある。このような場合は、rubyやcompassコマンドへのパスをconfig.ymlまたはconfig_dev.ymlなどで指定する。

assetic:
  bundles: [ AcmeDemoBundle ]
  ruby: /home/user/.rbenv/versions/1.9.3-p194/bin/ruby
  filters:
    compass:
      apply_to: "\.s[ac]ss$"
      bin: /home/user/.rbenv/versions/1.9.3-p194/bin/compass
Posted by Nao Iizuka <iizuka@kyu-mu.net>
Powered by Bitter