Assetic CSS not respected in Symfony2

StackOverflow https://stackoverflow.com/questions/22335748

  •  13-06-2023
  •  | 
  •  

Question

I'm using Assetic to load CSS files for my Symfony2 project. The CSS loads properly, I can view it when I inspect element/sources in Chrome, but the page is still not styled. The only thing in the files at this point is:

Assetic Generated: core_part_1_base_1.css
body {
    background-color: yellow;
}

::base.html.twig:
<html>
    <head>
        {% stylesheets '@AcmeCoreBundle/Resources/public/css/*.css output='css/core' %}
            <link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
        {% endstylesheets %}
    </head>
    <body>
       <div id="main_container">Hello World</div>
    </body>
</html>

config.yml:
    ...
    assetic:
        debug:          %kernel.debug%
        use_controller: false
        bundles:        [ ]
        filters:
            cssrewrite: ~
    ...

Removing the stylesheets block and replacing with this line:

<link rel="stylesheet" type="text/css" href="{{ asset('css/core.css') }}" />

seems to have worked, but I want to make it work using the stylesheets block if possible!

Was it helpful?

Solution

I think you have to add the bundles in which you want to use Assetic in the bundles option of the Assetic configuration:

assetic:
    bundles: [AcmeCoreBundle]

Also, adding the extension in the output name might help: output='css/core.css'

OTHER TIPS

Your page "not being styled" is a rather ambiguous statement. Your CSS are not loading or just images?

If you have @imports or referencing images in your css files, then in your javascripts block, you have to use filter='cssrewrite' in order to work properly:

    {% stylesheets '@AcmeCoreBundle/Resources/public/css/*.css filter='cssrewrite' output='css/core.css' %}
        <link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
    {% endstylesheets %}

Also, it seems like your output does not have a .css extension, I don't know if that matters, but you might as well try.

Another thing, there's been times that for some reason, when I add the output option in the stylesheets block, it doesn't work in production environment, but it does in development. The easiest solution I've found is just not to use output, and concatenate/uglify/minimize my files using an external tool like Grunt.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top