¿Cómo incluir archivos CSS en Symfony 2 y Twig?

Question

¿Cómo incluir archivos CSS en Symfony 2 y Twig?

Estoy jugando con Symfony2, y tengo problemas, incluyendo CSS y JS archivos en Twig plantilla.

Tengo un paquete llamado Webs/HomeBundle dentro del cual tengo HomeController con indexAction que renderiza un archivo de plantilla de ramita:

public function indexAction()
{
    return $this->render("WebsHomeBundle:Home:index.html.twig");
}

Así que esto es fácil. Ahora lo que quiero hacer, es incluir algunos archivos CSS y JS dentro de esta plantilla Twig. La plantilla se ve así:

<!DOCTYPE html>
<html>
<head>  
    {% block stylesheets %}
        <link href="{{ asset('css/main.css') }}" type="text/css" rel="stylesheet" />
    {% endblock %}
</head>
<body>
</body>
</html>

El archivo que me gustaría incluir, main.css el archivo se encuentra en:

Webs/HomeController/Resources/public/css/main.css

Así que mi pregunta es básicamente, ¿cómo diablos incluyo un archivo CSS simple dentro de la plantilla Twig?

Estoy usando la función Twig asset() y simplemente no llega a la ruta CSS correcta. Además, corro este comando en la consola:

app/console assets:install web

Esto creó una nueva carpeta

/web/bundles/webshome/...

Esto es solo un enlace a la

src/Webs/HomeController/Resources/public/

¿Verdad?

Preguntas

¿Dónde coloca sus archivos asset, JS, CSS e imágenes? ¿Está bien ponerlos en Bundle/Resources/public carpeta? ¿Es ese el lugar adecuado para ellos?
¿Cómo se incluyen estos archivos asset en la plantilla Twig utilizando la función asset? Si están en una carpeta pública, ¿cómo puedo incluirlos?
debo configurar algo más?

60

twig symfony

Author: Trix, 0000-00-00

Source

3 answers

Y puedes usar la etiqueta% stylesheets % (assetic feature):

{% stylesheets
    "@MainBundle/Resources/public/colorbox/colorbox.css"
    "%kerner.root_dir%/Resources/css/main.css"
%}
<link type="text/css" rel="stylesheet" media="all" href="{{ asset_url }}" />
{% endstylesheets %}

Puede escribir la ruta a css como parámetro (%parameter_name%).

Más sobre esta variante: http://symfony.com/doc/current/cookbook/assetic/asset_management.html

11

Author: ZhukV,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-19 05:21:46

Las otras respuestas son válidas, pero la guía Oficial de Mejores Prácticas de Symfony sugiere usar la carpeta web/ para almacenar todos los activos, en lugar de d

3

Author: ,
Warning: date() expects parameter 2 to be long, string given in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61

score 75 · Accepted Answer

Está haciendo todo bien, excepto pasar su ruta de paquete a la función asset().

De acuerdo con la documentación - en su ejemplo esto debería verse como a continuación:

{{ asset('bundles/webshome/css/main.css') }}

Consejo : también puede llamar a assets:install con la clave --symlink, por lo que creará enlaces simbólicos en la carpeta web. Esto es extremadamente útil cuando se aplican a menudo js o css cambios (de esta manera sus cambios, aplicados a src/YouBundle/Resources/public se reflejarán inmediatamente en la carpeta web sin necesidad de llamar assets:install de nuevo):

app/console assets:install web --symlink

Además, si desea agregar algunos activos en su plantilla secundaria, puede llamar al método parent() para el bloque Twig. En su caso sería así:

{% block stylesheets %}
    {{ parent() }}

    <link href="{{ asset('bundles/webshome/css/main.css') }}" rel="stylesheet">
{% endblock %}