Maison >interface Web >tutoriel CSS >Comment référencer des images dans des fichiers CSS au sein d'un projet Symfony 2 ?
Problème :
Vous avez des fichiers CSS contenant des chemins d'accès aux images, polices et autres actifs. La structure de votre fichier est la suivante :
... +-src/ | +-MyCompany/ | +-MyBundle/ | +-Resources/ | +-assets/ | +-css/ | +-stylesheets... +-web/ | +-images/ | +-images... ...
Vous souhaitez référencer vos images dans la feuille de style, mais diverses solutions se sont avérées problématiques.
1. Divisé en répertoires « Public » et « Privé » :
Stockez vos fichiers CSS d'origine dans un répertoire privé (par exemple, src/Common/DirtyBundle/Resources/assets/css). Copiez ces fichiers dans un répertoire public avant d'exécuter Assetic:dump (par exemple, web/bundles/commondirty/css_original).
2. Utiliser le filtre Assetic "cssrewrite" (Facultatif) :
Ce filtre n'est pas strictement nécessaire, mais il peut simplifier la manipulation du chemin. Si vous l'utilisez, assurez-vous d'ajuster la syntaxe en conséquence.
3. Intégrez avec Twig :
Dans votre modèle Twig, référencez les fichiers CSS à l'aide des répertoires et filtres appropriés :
{% stylesheets 'bundles/commondirty/css_original/container.css' filter="cssrewrite" %} <link href="{{ asset_url }}" rel="stylesheet" type="text/css" /> {% endstylesheets %} {% stylesheets '@CommonDirtyBundle/Resources/assets/css/k.css' filter="cssrewrite" %} <link href="{{ asset_url }}" rel="stylesheet" type="text/css" /> {% endstylesheets %}
4. Gérer les chemins d'image :
Utilisez des chemins relatifs ou absolus pour référencer des images en fonction de la configuration. Par exemple :
5. Maintenance :
Après avoir généré le fichier CSS combiné à l'aide d'assetic:dump, vous pouvez supprimer les fichiers CSS d'origine du répertoire public si vous le souhaitez.
6. Contraintes restantes :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!