Saya sedang mengusahakan projek Symfony 6 dengan Twig dan Tailwind CSS.
Saya memasang segala-galanya untuk panduan ini di sini: https://tailwindcss.com/docs/guides/symfony
Saya dapat menggunakan (beberapa) elemen css tailwind dan Encore Webpack saya memuatkan konfigurasi tailwind yang diperlukan melalui PostCSS dan membina aset di bawah direktori awam/build/.
base.html.twig memuatkan sumber binaan
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>
Dengan cara ini akhirnya saya boleh menggunakannya dalam index.html.twig (yang memanjangkan 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 %}
Seperti yang anda lihat, saya cuba menggunakan atribut tailwind pada tajuk contoh dan imej. Walau bagaimanapun, sifat css tailwind berkenaan pengepala berfungsi, tetapi tidak untuk imej. Menyemaknya dalam penyemak imbas juga tidak menunjukkan nilai css bagi harta yang diberikan. Saya mahu imej saya lebih kecil dan mempunyai sempadan seperti ini:
Ini adalah hasilnya:
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya dapati masalahnya: ia ada kaitan dengan laluan imej sebenar.
Sebelum ini disimpan di bawah
assets/images/image1.jpgSaya menggunakannya dalam templat ranting saya seperti ini:
Kini, saya menggunakan Webpack Encore
.copyFiles()函数将图像存储在public/build/imagesMuat turunwebpack.config.js
.copyFiles({ from: "./assets/images", to: "images/[path][name].[hash:8].[ext]", //uses regex pattern pattern: /\.(png|jpg|jpeg|gif)$/, })Kini apabila saya menyelesaikannya dari laluan binaan awam (tanpa mengira cincangan) ia berfungsi:
Saya rasa ini entah bagaimana berkaitan dengan webpack dalam beberapa proses async. Saya akan mengedit soalan.