How to have Assetic + sass work with Symfony2 in W

Question

I'm trying to get Assetic to run within Symfony 2.0.11 in order to use sass for css files.

I've been fiddling around that issue for hours, and from what I gather the current assetic version (1.0.2) is screwed up and just can't work in windows.

I tried updating assetic and asseticBundle to the latest Master version from github, but those require Symfony 2.1 which brings in a lot of changes and is not backward compatible (not to mention it's not officially released either), so that's not an option.

This post symfony2 assetics yui compressor on windows (path syntax) gives some good insight on the matter, but unfortunately the changes on the assetic lib it recommends aren't enough to make it work properly in my environment.

I found some interesting bits also in https://github.com/kriswallsmith/assetic/commit/5621cd449b0d85316e5872d672e7e900edc2246c and https://github.com/kriswallsmith/assetic/issues/25

In the end, what I know is that I need to alter vendor/assetic/src/Assetic/Util/ProcessBuilder.php, maybe some other files in the package, and perhaps add some informations in my config.yml file (it seems adding the path to java or sass might help).

What I need is for someone who was able to get a working configuration to give me pointers onto what I'm missing, or ideally the steps required to have that damn thing work.

Anyone up to the task ?

_____Update: Still digging, it's only been 3 days now :/

New elements :

1/ php5.3.8 may have an issue with proc_open and data > 2048 bytes as per https://bugs.php.net/bug.php?id=60120 This issue can have implications when getting symfony from the git repository ( https://github.com/symfony/symfony/issues/3216 ). issuing "git config --global core.autocrlf input" and re-fetching everything from git allowed me to use php5.3.10 without crash.

2/ https://github.com/kriswallsmith/assetic/commit/5621cd449b0d85316e5872d672e7e900edc2246c looks like a decent basis. I've maded some minor modifications on the paths in Process.php (cf https://github.com/kriswallsmith/assetic/issues/92 ) but I'm not really sure that is relevant. Anyhow, the command line I get from Assetic at this point works in a shell and outputs the expected css.

3/ sass.bat (located in Ruby193\bin) needs to have absolute path to ruby.exe in order to go a bit further (I learnt that the hard way, you only see the error message if you var_dump and kill the script at the right place!)

Now, things seem a bit better, but still not working with sass (I think it'd work fine with some other filters) I managed to isolate the issue in Process.php (around line 172) at "$data = fread($pipe, 8192);" : The second time the script passes at this place, with $pipe pointing to the second resource, it never returns... and php gets stuck and has really hard times coming out (I need to kill/restart wamp at least two times to be able to make another test)

I'm really not familiar with proc_open and streams, and I have difficulties understanding what the code is trying to do in there...

I hope this can help the next one trying to have things work, and eventually help my case too. Still looking for some support on the matter!

_____Update:

Further testing made me realize that I could have "php app/console assetic:dump" work when the sass file was small enough. It seems to me that the actual css rules (excluding variable definitions and mixins) need to me smaller than 4096 bytes with php5.3.10, even less with php 5.3.8. That is pointing to the proc_open bug described in https://bugs.php.net/bug.php?id=60120 and https://bugs.php.net/bug.php?id=51800

_____Update:

I tried to install php5.4 to check if it was fixing the issue. It took me some time to realize the reason this version was not working on my computer is because there is no x64 build yet. I then installed the 32bits version of wamp, and got php5.4 working with it easily. End result : proc_open still hangs :( I'm beginning to be out of ideas here...

---

Walkthrough:

So, eventually I got this to work, and thought I'd try to sum the most important steps up for later viewers :

1. Have Ruby 1.9.3 and compass 0.12 installed

check http://rubyinstaller.org/downloads/

Update compass to 0.12 with

"gem update --system"

and then

"gem install compass"

2. Alter compiler.rb in compass

Go to Ruby193\lib\ruby\gems\1.9.1\gems\compass-0.12.0\lib\compass in line 10, replace

self.from, self.to = File.expand_path(from), to

with

self.from, self.to = from.gsub('./', ''), to

/!\ with some setup, it may be the other way around, but with the setup I'm trying to describe, it goes this way.

3. point Assetic to the latest version that works with symfony 2.0.11

edit the deps file like such :

[assetic]
    git=http://github.com/kriswallsmith/assetic.git
    ;version=v1.0.2
    version=ac71449e46bed22c276da26bf54ab2f733b3801d
[AsseticBundle]
    git=http://github.com/symfony/AsseticBundle.git
    target=/bundles/Symfony/Bundle/AsseticBundle
    ;version=v1.0.1
    version=da4a46ce37557dcf3068b8493b12bdbbe47455e2

/!\ you'll need to remove the references to a specific version in the deps.lock file too !

and issue a "php bin/vendors install".

4. Change your config.yml

here's what mine looks like now :

# Assetic Configuration
assetic:
    debug:          %kernel.debug%
    use_controller: false
    # java: /usr/bin/java
    filters:
        compass:
            bin: e:\outils\Ruby193\bin\compass.bat

5. Use absolute path in compass.bat/sass.bat

Go to your Ruby193\bin directory and edit compass.bat to set an absolute path to ruby.exe (do the same with sass.bat while you're at it)

6. Change the call in template

Here's what mine looks like now :

{% stylesheets filter='compass' output='css/*.css'
        '@LndBimBundle/Resources/public/css/main.scss'
    %}
        <link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
    {% endstylesheets %}

Testing :

For testing, you can use

php app/console assetic:dump --verbose --no-debug

That way if you get into an endless loop as I did, you can just ctrl+C, which makes testing way more efficient than in a browser

/!\ You absolutely need to use --no-debug, or you'll end up with a bunch of unwanted lines in your css that look like :

@media -sass-debug-info{filename{font-family:file\:\/\/C\:\/Users\/Mattso\/AppData\/Local\/Temp\/ass9DBF\.tmp\.scss}line{font-family:\0000359}}

You can use

die($this->commandline);

in the run method of

vendor\assetic\src\Assetic\Util\Process.php

to show you the current command line, and test it.

Mine currently looks like this :

cmd /V:ON /E:ON /C ""e:\outils\Ruby193\bin\compass.bat" "compile" "C:\Users\Mattso\AppData\Local\Temp" "--config" "C:\Users\Mattso\AppData\Local\Temp\ass59BB.tmp" "--sass-dir" "" "--css-dir" "" "C:\Users\Mattso\AppData\Local\Temp\ass59BC.tmp.scss""

Then you just need to type "php app/console assetic:dump --no-debug" in your cli to create the css files in web\css and refresh your site's page. Et... voila! (hopefully!)

Note: As you may have noticed, I'm using the CompassFilter instead of the SassFilter. That is because it does the same thing (and more) and can actually be made to do what we expect of it. If anyone can find out how to fix the SassFilter, that would be swell. Meanwhile I already spent way too much time on this.

I've been pulling my hair for days on that crazyness, I hope this post will be helpful to some other people's mental health ;)

Answer 1

Just as an update to this question (or for anyone only using sass not compass) if anyone comes here looking for the answer. All that should be needed now is:

assetic:
    filters:
        cssrewrite: ~
        sass: 
          bin: "<pathtosass>"
          apply_to: "\.scss$"

parameters:
     assetic.ruby.bin: '<pathtoyourrubyhere>'

This is using PHP 5.4

Answer 2

Please see my answer to the question How to use SCSS filter in Symfony2 under Windows?: https://stackoverflow.com/a/9658410/3765

It is a pretty comprehensive coverage of my time spent trying to get Assetic working on Windows.

---

Based on your example - you shouldn't need to add the cssrewrite filter. Here is how I use Compass from Twig:

{% stylesheets filter='compass' output='css/compiled/*.css' 'css/example.scss' %}
    <link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}