Search code examples
symfonyasseticsymfony3.xsymfony-3.4

Symfony3 & Assetic : different behavior in dev or prod

I'm working on Symfony 3.4 and Assetic. Let's say my website is www.mycompany.com and i'm using 2 particular types of asset :

  • Google web font via @Import() in my main CSS file
  • Custom CSS fonts, with font files manually uploaded in in web/fonts/

When i visit my website in dev mode www.mycompany.com/app_dev.php/ :

  • Google fonts are well loaded and work.
  • Font awesome doesn't work (beacause app_dev.php/fonts/ is 404)

When i visit my website in prod mode www.mycompany.com/ :

  • Google fonts doesn't work (@import seems not to be loaded...)
  • Font awesome work (because css files are found in www.mycompany.com/fonts/)

Why this behavior ? For your information, i use Assetic this way to load myu assets :

{% stylesheets '@PimInterfaceBundle/Resources/public/css/*' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

// Same for JS

Thanks.

Solution

  • When using the cssrewrite filter, don't refer to your CSS files using the @XxBundle syntax.

    try this 

    {% stylesheets 'bundles/piminterface/css/*' filter='cssrewrite' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

    here is doc

    1. Including CSS Stylesheets

    2. Fixing CSS Paths with the cssrewrite Filter

    3. Dumping Asset Files in the prod Environment

    if this is not working for you then try php bin/console asset:install

    in prod php bin/console assetic:dump --env=prod --no-debug `