Using the scss filter in assetic

Since there isn’t a whole lot of information on getting the scss filter to work in assetic I’ll quickly show you how I got it to work.

If you didn’t already know, assetic makes managing your css and javascript really clean and easy. The scss filter and the –watch option makes styling a site a lot more efficient and admittedly, rather enjoyable!

The biggest problem I encountered was configuring assetic with sass. Originally I was using rvm to manage ruby (i use ubuntu 11.10 btw) but there are some issues with assetic and rvm. see discussion. Instead, I removed rvm and just installed ruby-1.9.1 from source.

sudo apt-get install ruby1.9.1

Next, install compass

sudo gem install compass

For me the sass executable is installed in /usr/local/bin. Since this is different than the default location, my configuration looks like this:

//config.yml
# Assetic Configuration
assetic:
    debug: '%kernel.debug%'
    use_controller: false
    sass: /usr/local/bin/sass
    filters:
        scss: ~
        cssrewrite: ~
        yui_css: { jar: '%kernel.root_dir%/Resources/java/yuicompressor-2.4.6.jar' }

Now in the head of your main layout just include the stylesheets you want assetic to manage.

// app/Resources/layout.html?yui_css'
        'scss/common/*.scss'
        'jquery/css/common/*.css'
        '@ApplicationSiteBundle/Resources/public/scss/*.scss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" type="text/css" media="screen" />
    {% endstylesheets %}
    {% javascripts output='js/compiled/script.js' filter='?yui_js'
            'jquery/js/common/*.js'
            '@ApplicationSiteBundle/Resources/public/js/*.js'
    %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}

Sometimes when you add new file to assetic it fails to dump it. Just clear the cache, dump the assets, and refresh the browser.

sudo rm -rf app/cache/*
sudo chmod 777 app/cache -R
app/console assetic:dump

You can make assetic refresh upon any changes in real time by using the –watch option

app/console assetic:dump --watch

Hope this helps someone out there!
Feedback appreciated.

Leave a Reply

Your email address will not be published.