Ich arbeite derzeit an einem Symfony 6-Projekt mit Twig und Tailwind CSS.
Ich habe hier alles für diese Anleitung installiert: https://tailwindcss.com/docs/guides/symfony
Ich konnte (einige) Tailwind-CSS-Elemente verwenden und mein Webpack Encore hat die erforderliche Tailwind-Konfiguration über PostCSS geladen und die Assets im Verzeichnis public/build/ erstellt.
base.html.twig lädt Build-Ressourcen
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>
Auf diese Weise kann ich sie endlich in index.html.twig verwenden (was base.html.twig erweitert)
{% 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 %}
Wie Sie sehen können, habe ich versucht, das Rückenwind-Attribut auf den Beispieltitel und das Bild anzuwenden. Allerdings funktionieren die Rückenwind-CSS-Eigenschaften in Bezug auf Header, jedoch nicht für Bilder. Auch beim Überprüfen im Browser wird der CSS-Wert der angegebenen Eigenschaft nicht angezeigt. Ich möchte, dass mein Bild kleiner ist und einen Rand wie diesen hat:
Das ist das Ergebnis:
我发现了问题：与实际图像的路径有关。
之前存储在
assets/images/image1.jpg下我在树枝模板中使用了它，如下所示：
现在，我使用Webpack Encore的
.copyFiles()函数将图像存储在public/build/images下webpack.config.js
.copyFiles({ from: "./assets/images", to: "images/[path][name].[hash:8].[ext]", //uses regex pattern pattern: /\.(png|jpg|jpeg|gif)$/, })现在，当我从公共构建路径（无论哈希值如何）解决它时，它正在工作：
我猜这在某种程度上与某些异步进程中的 webpack 相关。我将编辑问题。