Search code examples
symfonyasseticcompass

Variables don't work inside partials with assetic in Symfony2

I have a Symfony2 project using compass and assetic (or atleast trying too).

I have a main file called app.scss with all the imports of the partials and compass too and it compiles correctly, but when I create a variable in one partial and try to access it in another, I get an error, like so:

 Line 63: Undefined variable: "$row-width".

app.scss would look like this:

@import "compass";
@import "settings"; //here I have my variable
@import "foundation/bower_components/foundation/scss/normalize";
@import "foundation/bower_components/foundation/scss/foundation";

@import "fonts";

@import "home"; //here I try to call the same variable that gives the error

The rest of the css in the partial works fine, except for compass mixins, if I try to call a mixin inside one of the partials, I get a similar "undefined" error.

My config.yml is like so:

# Assetic Configuration
assetic:
    debug:          "%kernel.debug%"
    use_controller: false
    bundles:        [ ]
    filters:
        cssrewrite: ~
        compass: 
            load_paths:
                 - '%kernel.root_dir%/../web/foundation/bower_components/foundation/scss'
            apply_to: ".(scss|sass)$"

And finally, in my head:

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

It seems assetic is creating different files for each partial, I don't know if this is normal practice, I'm used to compiling using compass and it only generates one css file. 

18:26:36 [file+] /Users/Maggie/Sites/app/../web/css/1a73e0a.css
18:26:41 [file+] /Users/Maggie/Sites/app/../web/css/1a73e0a_part_1__fonts_1.css
18:26:41 [file+] /Users/Maggie/Sites/app/../web/css/1a73e0a_part_1__home_2.css
18:26:41 [file+] /Users/Maggie/Sites/app/../web/css/1a73e0a_part_1__settings_3.css
18:26:42 [file+] /Users/Maggie/Sites/app/../web/css/1a73e0a_part_1_app_4.css

Anyway, when I see the code on my browser, there is only the call for the main css:

 <link rel="stylesheet" href="/css/1a73e0a.css" />

It seems this question is similar to mine, but is not answered either: Basset/Assetic + SASS wont compile imports (osx)

Solution

  • Well, right as I start the bounty I find a solution:

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

    Since I only have one scss to compile (the rest are all partials) I needed to specify it, this way it only compiles that file and the imports start working correctly and the variables can be used on all of them (if they have been declared before, of course).