Symfony2 - 如何基于当前用户本地设置CSS路径，而不会丢失树枝和过滤器功能

Question

I work a multi-localization project using Symfony2 , and i separate ( CSS/Images ) on different folder based on current user local.

Folder Structure Ex:

Resources\
    public\
        css\
            ar\
                home.css
            en\
                home.css

**Now i need the Assetic to render the correct home.CSS file based on current user local {ar | en} without loosing twig and filters functionality **

Example - This not work :

{% stylesheets 
    'bundles/atcopcore/css/{ app.request.locale }/home.css' filter='cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}" />

Note : I want to get advantage of css compine and this can't be done if i do the following :

<link rel="stylesheet" href="{{ asset('css/' ~ app.request.locale ~ '/home.css') }}" />

How i can do this ...

i found a link could be usefull , but i think there is more professional way to do this.

How to embed stylesheets with Assetic based on a value in the session

Please , Any suggestions ?

Answer 1

Assetic provides an functionality for you problem.

Add this to your configuration

assetic:
   # more from assetic
   variables:
      locale: [de, en, it, es] # whatever

And in your twig file:

{% stylesheets  filter='cssrewrite' 'bundles/atcopcore/css/home.{locale}.css' %}
{% endstylesheets %}

<link href="{{ asset('bundles/atcopcore/css/home.' ~ app.request.locale ~ '.css') }}" rel="stylsheet" />

Now assetic will create 4 files, home.de.css, home.en.css, home.it.css and home.es.css. And in your template your decide which css should be loaded.

Answer 2

You maybe should try something like this:

{% if app.request.locale == "en" %}
    {% stylesheets  filter='cssrewrite'
    'bundles/atcopcore/css/en/home.css'
    'bundles/atcopcore/css/en/foo.css'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% elseif app.request.locale == "fr" %}
    {% stylesheets  filter='cssrewrite'
    'bundles/atcopcore/css/fr/home.css'
    'bundles/atcopcore/css/fr/foo.css'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% elseif app.request.locale == "ar" %}
    {% stylesheets  filter='cssrewrite'
    'bundles/atcopcore/css/ar/home.css'
    'bundles/atcopcore/css/ar/foo.css'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endif %}

It looks a little bit verbose, but this way all your css files will be combined and good one will be served to the user.

Answer 3

This is a trick

Your Twig file

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

Your '@AcmeBundle/Resources/public/css/css.css'

/* acme_css */
@import url('/css.css'); 

Your routing.yml

acme_css:
    path:     /css.css
    defaults: { _controller: AcmeBundle:NameOfYourConroller:css}

Your controller

public function cssAction()
{
    $request = $this->get('request');
    // all your css files here
    $css = array(
        "@import url('/css/".$request->getLocale().".css.css');",
    );
    return new Response(implode(';',$css), 200, array('Content-Type' => 'text/css'));
}

NB : To test dont forget to empty your cache