Bonjour,

Je découvre Symfony (2.8) et eprouve quelques difficultés pour que ma feuille de style soit prise en charge.
Dans les tutos que je lis (Symfony 2.5 et 2.6) on y parle de placer nos fichiers css, js, jpg dans le dossier Ressources/Public de chaque bundle et de passer par la console, en utilisant apparemment et obligatoirement Assetic, pour créer un lien symbolique vers le dossier web (du moins en phase de dev).

Toutefois la documentation officielle indique dans ses Best practices que pour le confort des designers il est préférable de placer ces fichiers directement dans le dossier web. Par ailleurs Assetic ne semble pas/plus obligatoire puisque plus installer par défaut dans Symfony depuis V.2.8 et elle, sauf erreur de ma part, ne spécifie pas qu'il faille passer par la console.

J'ai donc créé un un fichier css/app.css dans le répertoire web
dans mon template général je fais appel à ma feuille de style comme indiqué dans la doc

{#src/AppBundle/Ressources/views/layout.html.twig#}
<!doctype html>
 <html lang="fr">around <head>
  {# ..... #}
  {% block stylesheet %}around          
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" />
          <link href="{{ asset('css/app.css') }}" rel="stylesheet" />
          {% endblock stylesheet %} around         
</head>
{# ..... #}

Les feuilles de style de Twitter Bootstrap fonctionnent parfaitement bien mais la mienne. Quand j'affiche le code source et que je clique sur le lien de cette feuille de style je suis renvoyé vers une page 404 générée par Symfony!!!!!

Aussi cette façon de procéder est aussi applicable aux images. Toutefois, si tous les "assets" d'une applications doivent ou peuvent être placer dans le dossier ressources/public des bundles pour subir des traitements par Assetic, afin d'être minifiés ou compressés, il me semble inconcevable de faire de la sorte pour toutes les images. Imaginons que je veuile faire un site pour un photographe, je peux effectivement mettre les images du templates du site dans ces dossiers de mes bundles, mais pas les images téléchargées par le client.

Merci pour vos réponses

6 réponses


Nightbringer
Réponse acceptée

Salut,

de toute façon y a pas de magie en info/prog.
Dans un premier temps install tes assets en symlinks comme ça pour dev tu le fais qu'une seule fois (à chaque fois que tu créés un nouveau bundle avec des assets) avec cette commande :

  # if possible, make absolute symlinks in web/ if not, make a hard copy
  $ php app/console assets:install --symlink

Ensuite tu vérifies que dans le dossier web/bundles/* tu as bien ton fichier css. et à partir de là tu links ton css dans ton html

<link href="{{ asset('bundles/MyBundle/css/app.css') }}" rel="stylesheet" />

Autres solutions que j'utilise, j'ai un dossier front_src à la racine de mon projet Symfony qui contient mon style Sass :

Ensuite j'utilise Gulp pour générer le style de ma webapp :

var gulp = require('gulp');
var sass = require('gulp-sass');
var minify = require('gulp-clean-css');

var paths = {
  src:  [ 'front_src/**'],
  dest: [ 'web'],
};

gulp.task('sass', function () {
  gulp.src(['./front_src/styles/main.scss'])
    .pipe(sass().on('error', sass.logError))
    .pipe(minify())
    .pipe(gulp.dest(paths.dest + '/css'));
});

gulp.task('sass:watch', function () {
  gulp.watch(paths.src + '/*.scss', ['sass']);
});

Il va automatiquement créer mon css à partir des fichiers sass et les mettre dans le dossier web/css/main.css
Ensuite je n'ai qu'à linker mon css dans mon base.html.twig :

    <link rel="stylesheet" href="{{ asset('css/main.css') }}">
bibi427
Auteur
Réponse acceptée

[ERRATA]
La solution publiée en son temps dans le commentaire maintenant ci-dessous (les pointillés) si elle semblait résoudre mon problème à l'époque n'en était pas vraiment une, loin s'en faut.

Le véritable problème était que j'avais créer un hôte virtuel, pour ne pas devoir taper à chaque fois localhost/monprojet/web/app_dev.php, sans configurer correctement le fichier httpd_vhosts.conf . Du coup mes feuilles de styles étaient prises en charge quand je mettais le chemin complet dans le navigateur mais pas quand j'appelais l'hôte virtuel.
Donc, pour ceux qui rencontreraient le même problème en utilisant xampp, wamp etc pensez à bien configurer le dit fichier comme ceci:

      #####   
      ## monprojet.dev   
      #####   
     NameVirtualHost monprojet.dev
    <VirtualHost monprojet.dev>    
          ServerName symfony.dev
          DocumentRoot I:/xampp/htdocs/monprojet/web/
          DirectoryIndex app.php
         <Directory "C:/xampp/htdocs/monprojet/web/">
                   Options Indexes FollowSymLinks MultiViews
                   AllowOverride None
                  Order allow,deny
                  allow from all
            </Directory>
   </VirtualHost>  

Merci pour cette description qui me sera certainement fort utile :)
Comme je n'obtenais toujours rien comme résultat malgré que je suivais tes recommandations j'ai fureté dans les différents fichiers de config pour voir si une option qui "bloquait qqch".
Dans "extra" du composer.json j'ai utlisé toute les valeurs possible pour le paramètre "symfony-assets-install, sans succès. j'ai fini par supprimer tout ce qui concernait Asset dans le composer.json avant de faire un update.

"scripts": {
    "post-install-cmd": [

        "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::installAssets",

    ],
    "post-update-cmd": [

        "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::installAssets",

    ]
},  

"extra": {

    "symfony-assets-install": "relative",   

    },

Depuis lors ma feuille est prise en charge et se trouve dans le dossier web/css. Il semble donc que le ScriptHandler y était pour qqch.
Merci en tout cas pour votre aide et bon dimanche

bibi427
Auteur

J'avais bien pensé à ça ;) Avant de posté il me semble que j'avais bien fait un cache:clear en console et ctrl+F5 dans le navigateur. Dans le doute je viens de le refaire mais rien n'y fait :(

Salut,
les fichiers assets placés dans MyBundle/Ressources/public sont installés en utilisant la commande suivante :

  # make a hard copy of the assets in web/
  $ php app/console assets:install

  # if possible, make absolute symlinks in web/ if not, make a hard copy
  $ php app/console assets:install --symlink

  # if possible, make relative symlinks in web/ if not, make a hard copy
  $ php app/console assets:install --symlink --relative

Source

Ensuite les fichiers sont copiés dans le dossier web/bundles/
Du coup dans ton code il faudra mettre :

<link href="{{ asset('bundles/MyBundle/css/app.css') }}" rel="stylesheet" />

A adapter en fonction des noms de tes bundles.

bibi427
Auteur

Merci pour l'info ;)
Mais il doit y avoir autre chose car même comme ça, ça ne fonctionne pas. J'ai même fait un un composer require/asset, avant savait-on jamais!
J'ai testé les trois manière et rien . Après le passage en console, Il me crée bien le répertoir de mon bundle dans web/bundles et mon app.css
Bizarrement même quand j'utilise app/console assets:install il semble faire des copies symboliques!!!!
Et quoi que je mettes comme références en href ce sont les feuilles de style du framework qui sont mentionnée quand je click sur la référence en affichant les sources

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8" />
            <meta name="robots" content="noindex,nofollow" />
            <title>    No route found for &quot;GET /bundles/app/css/app.css&quot; (from &quot;http://symfony.dev/&quot;) (404 Not Found)
    </title>
            <link href="http://symfony.dev/bundles/framework/css/structure.css" rel="stylesheet" />
            <link href="http://symfony.dev/bundles/framework/css/body.css" rel="stylesheet" />
            <link href="http://symfony.dev/bundles/framework/css/exception.css" rel="stylesheet" type="text/css" media="all" />
        </head>

Mais même si ça fonctionnait, on ne peut pas dire que ce soit très pratique même si je présume qu'il doit y avoir une configuration à faire pour qu'en développement tu ne doive pas passer par la console à chaque modification de tes css.

La solution de tout mettre directement dans le le répertoire web me paraissait tout de même plus accomodante, surtout en travaillant avec un préprocesseur.

Enfin ce sera pour demain ou après demain.
Merci et bonne soirée

Juste pour info voici les extra de mon composer.json :

    "extra": {
        "symfony-app-dir": "app",
        "symfony-web-dir": "web",
        "symfony-assets-install": "relative",
        "incenteev-parameters": {
            "file": "app/config/parameters.yml"
        },

Si le fait de déclarer le symfony-app-dir et le symfony-web-dir peut changer quelque chose, ...