Je travaille actuellement sur un projet Symfony 6 avec Twig et Tailwind CSS.
J'ai tout installé pour ce guide ici : https://tailwindcss.com/docs/guides/symfony
J'ai pu utiliser (certains) éléments CSS tailwind et mon Webpack Encore a chargé la configuration tailwind requise via PostCSS et a construit les actifs dans le répertoire public/build/.
base.html.twig charge les ressources de construction
base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
{% block title %}Welcome!
{% endblock %}
</title>
<link
rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
{# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{% endblock %}
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{{ encore_entry_script_tags('method2') }}
{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>
De cette façon, je peux enfin les utiliser dans index.html.twig (qui étend base.html.twig)
{% extends "base.html.twig" %}
{% block title %}
Movies Page
{% endblock %}
{% block body %}
<div class="bg-blue-500 text-2xl text-center font-bold">
{% for movie in movies %}
<li>{{movie.title}}</li>
<p class="animate-ping">{{movie.releaseYear}}</p>
{% endfor %}
<img class="p-1 bg-white border rounded max-w-sm" src="{{asset('images/image1.jpg')}}"/>
</div>
{% endblock %}
Comme vous pouvez le voir, j'ai essayé d'appliquer l'attribut tailwind sur l'exemple de titre et d'image. Cependant, les propriétés CSS tailwind concernant les en-têtes fonctionnent, mais pas pour les images. Le vérifier dans le navigateur n'affiche pas non plus la valeur CSS de la propriété donnée. Je veux que mon image soit plus petite et ait une bordure comme celle-ci :
Voici le résultat :
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
J'ai trouvé le problème : cela a à voir avec le chemin de l'image réelle.
Précédemment stocké sous
assets/images/image1.jpgJe l'ai utilisé dans mon modèle de brindille comme ceci :
Maintenant, j'utilise Webpack Encore
.copyFiles()函数将图像存储在public/build/imagesTéléchargerwebpack.config.js
.copyFiles({ from: "./assets/images", to: "images/[path][name].[hash:8].[ext]", //uses regex pattern pattern: /\.(png|jpg|jpeg|gif)$/, })Maintenant, lorsque je le résous à partir du chemin de construction public (quel que soit le hachage), cela fonctionne :
Je suppose que cela est en quelque sorte lié au webpack dans un processus asynchrone. Je vais modifier la question.