How to use SCSS filter in Symfony2 under Windows?

Question

Actually, this is two questions:

1. What is the correct way to use the SCSS filter in my Symfony project in Windows (in Twig templates) ? I mean, how do i use the scss binary in windows?

2. Also, Do I necessarily need to use Compass? and "HOW" do i use compass if I have installed it?

Extension : Here is some configuration I have done:

In app/config/config.yml

assetic:
debug:          %kernel.debug%
use_controller: false
filters:
    scss:
        bin: "%kernel.root_dir%/Resources/libs/scss"
    compass:
        bin: "%kernel.root_dir%/Resources/libs/compass" 

---

In my twig file:

{% stylesheets 
      '@PlaylyfeBaseBundle/Resources/public/css/base.scss'
      '@PlaylyfeBaseBundle/Resources/public/css/another.scss'
   filter='scss'
   output='css/compiled/total.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

---

But, when i load the page, I get the following error (inside the css file)

[exception] 500 | Internal Server Error | RuntimeException
[message] The filename, directory name, or volume label syntax is incorrect.

[1] RuntimeException: The filename, directory name, or volume label syntax is incorrect.
at n/a
in C:\wamp\www\Symfony\vendor\assetic\src\Assetic\Filter\Sass\SassFilter.php line 162

at Assetic\Filter\Sass\SassFilter->filterLoad(object(Assetic\Asset\FileAsset))
in C:\wamp\www\Symfony\vendor\assetic\src\Assetic\Filter\FilterCollection.php line 62

at Assetic\Filter\FilterCollection->filterLoad(object(Assetic\Asset\FileAsset))
in C:\wamp\www\Symfony\vendor\assetic\src\Assetic\Asset\BaseAsset.php line 83

at Assetic\Asset\BaseAsset->doLoad(&#039

Ageratum

There has been no "correct" answer yet... For the record, what I am doing for the time being is that I am running scss to css converter in the background with the watch flag on, so that as I edit my scss files, the new css ones are generated on the fly... – Ageratum

Answer 1

I can only speak for Compass since is what I use but the same issues/problems most likely relate to the SASS/SCSS filters as well.

There are many known file path issues with Compass on Windows systems:

• Issue #748: File Path normalization to support Windows systems
• Pull Request #554: Fixes a bug on Windows systems
• Comments on commit 539f206

... and also fixes proposed to Assetic to deal with them:

• Pull Request #154: Compass problem on Windows, ruby.exe not found
• Pull Request #152: Until Compass issue 554 is not corrected
• Issue #131: You must compile individual stylesheets from the project directory.

I've found that doing the following was necessary for everything to work together...

#1. Make sure %ruby%\bin is in your environment PATH variable:

Example: PATH = "...;C:\Ruby\1.9.2\bin"

#2. Edit %ruby%\bin\compass.bat to use absolute paths:

@ECHO OFF
IF NOT "%~f0" == "~f0" GOTO :WinNT
@"C:\Ruby\1.9.2\bin\ruby.exe" "C:/Ruby/1.9.2/bin/compass" %1 %2 %3 %4 %5 %6 %7 %8 %9
GOTO :EOF
:WinNT
@"C:\Ruby\1.9.2\bin\ruby.exe" "%~dpn0" %*

#3. Revert 539f206 manually in compiler.rb @ line ~10:

Note: This step may not be required on the latest Ruby/Compass versions. (Reference)

Path: %ruby%\lib\ruby\gems\1.9.1\gems\compass-*\lib\compass\compiler.rb

#      self.from, self.to = from.gsub('./', ''), to
      self.from, self.to = File.expand_path(from), to

#4. Make sure Assetic is configured properly:

Example (config.yml):

assetic:
    debug:          %kernel.debug%
    use_controller: false
    filters:
        cssrewrite: ~
        compass:
            bin: %compass.bin%
        yui_js:
            jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
        yui_css:
            jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar

I use %compass.bin% in my parameters file so that I can ease the transition of the codebase between Windows and *nix systems, so my parameters.yml looks like this:

# Assetic
compass.bin: C:\Ruby\1.9.2\bin\compass.bat

#5. (Optional) Upgrade Assetic and AsseticBundle:

I have Assetic and AsseticBundle tagged to the very last possible commit that works with Symfony 2.0.x in my deps file:

[assetic]
    git=http://github.com/kriswallsmith/assetic.git
    version=ac71449e46bed22c276da26bf54ab2f733b3801d

[AsseticBundle]
    git=http://github.com/symfony/AsseticBundle.git
    target=bundles/Symfony/Bundle/AsseticBundle
    version=da4a46ce37557dcf3068b8493b12bdbbe47455e2

Make sure to replace %ruby% in all of the paths above with your actual path to ruby.exe, mine being C:\Ruby\1.9.2.

Steps #2 and #4 may or may not be required, but over the course of my time fighting with this issue, it is where I've ended up and my setup works (which is all I care about!).

Good luck!

---

Side question: Is your path to the SCSS/Compass binaries really in %kernel.root_dir%/Resources/libs?

Jackson

I'm using Zend and can't find a config.yml. Thoughts on #11055215? – Dibbell

Answer 2

1. Unfortunately the twig scss extension is broke on windows. It is a known problem. I spent some time trying to come up with a work around but to no available. I found it best to just use the scss executable with the --watch parameter to simply create the css files and store them in the Resource/public directory. That can also simplify some deployment issues as you don't need to worry about having scss on your servers.

2. Use of compass is not required for scss. Think of it as a library of useful bits of css. For example, if you ever get an urge to do css rounded edges, a Compass mixin will generate all of the vendor specific custom tags. Refer to the documentation for details on using it.

Virgilvirgilia

Answer 3

In my case after hours of searching and trying many solutions, this worked for me:

In 'app/config/config.yml' add:

parameters:
# Assetic
assetic.filter.compass.bin: D:/Ruby193/bin/compass

D:/Ruby193/bin/compass will depend on your Ruby path.

See screenshot: http://s23.postimg.org/3n2oc5wh7/MY_SOLUTION_THAT_I_FOUND.jpg

My system: Windows 7 ultimate, Ruby 1.9.3, Symfony 2.4.3

Merrymaker