Search code examples
csssymfonycompass

Group scss and css files into one file with assetic

In a Symfony2 project, I have several css and scss files. I use the compass filter to dump the scss ones and cssrewrite applied to all:

{% stylesheets 
filter='compass, cssrewrite'
'scssFile1.scss'
'scssFile2.scss' %}
<link rel="stylesheet" href="{{ asset_url }}"/>
{% endstylesheets %}

{% stylesheets 
filter='cssrewrite'
'cssFile1.css'
'cssFile2.css' %}
<link rel="stylesheet" href="{{ asset_url }}"/>
{% endstylesheets %}

I want to group those files into one. I've tried:

{% stylesheets 
filter='compass, cssrewrite'
'scssFile1.scss'
'scssFile2.scss'
'cssFile1.css'
'cssFile2.css' %}
<link rel="stylesheet" href="{{ asset_url }}"/>
{% endstylesheets %}

but I'm getting an error when doing assetic:dump because the css files have not the scss extension. Is there any way to group scss and css files into one?

Solution

  • If you want to combine files with different extensions, you´ll need to specify it in the Assetic filters configuration, specifically the apply_to parameter . Try modifying like in this example, in which they use regular expressions (so you can play around with it). For instance, to use .scss and .sass extensions:

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