私は現在、Twig と Tailwind CSS を使用した Symfony 6 プロジェクトに取り組んでいます。
このガイドのすべてをここにインストールしました: https://tailwindcss.com/docs/guides/symfony
(一部の) tailwind CSS 要素を使用できます。Webpack Encore は PostCSS 経由で必要な tailwind 構成を読み込み、public/build/ ディレクトリにアセットを構築します。
base.html.twig ビルド リソースの読み込み
base.html.twig
<!DOCTYPE html>
<html>
<頭>
<メタ文字セット="UTF-8">
<タイトル>
{% ブロック タイトル %}ようこそ!
{% エンドブロック %}
</title>
<リンク
rel="icon" href="data:image/svg xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><text y= "1.2em" font-size="96">⚫️</text></svg>">
{# Symfony UX の使用を開始するには、`composer require symfony/webpack-encore-bundle` を実行します #}
{% ブロック スタイルシート %}
{{ encore_entry_link_tags('app') }}
{% エンドブロック %}
{% JavaScript をブロックします %}
{{ encore_entry_script_tags('app') }}
{{ encore_entry_script_tags('method2') }}
{% エンドブロック %}
</head>
<本体>
{% ブロック本体 %}{% エンドブロック %}
</ボディ>
</html>
これで最終的に、index.html.twig (base.html.twig を拡張) で使用できるようになりました。
{% は "base.html.twig" を拡張します %}
{% ブロック タイトル %}
映画ページ
{% エンドブロック %}
{% ブロック本体 %}
<div class="bg-blue-500 text-2xl text-center font-bold">
{% 映画の中の映画の場合 %}
<li>{{movie.title}}</li>
<p class="animate-ping">{{movie.release Year}}</p>
{% 終了の %}
<img class="p-1 bg-white borderrounded max-w-sm" src="{{asset('images/image1.jpg')}}"/>
</div>
{% エンドブロック %}
ご覧のとおり、例のタイトルと画像に追い風属性を適用してみました。 ただし、ヘッダーに関する tailwind CSS プロパティは機能しますが、画像については機能しません。ブラウザで確認しても、指定されたプロパティの CSS 値は表示されません。画像を小さくして、次のような境界線を付けたいと考えています:
結果は次のとおりです。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
問題が見つかりました。実際の画像のパスに関係しています。
以前は
に保存されていましたassets/images/image1.jpgこれを小枝テンプレートで次のように使用しました:
ここで、Webpack Encore の
に保存します。.copyFiles()関数を使用して、画像をpublic/build/imageswebpack.config.js
.copyFiles({ から: "./assets/images", to: "画像/[パス][名前].[ハッシュ:8].[拡張子]", //正規表現パターンを使用します パターン: /\.(png|jpg|jpeg|gif)$/, })これで、パブリック ビルド パス (ハッシュに関係なく) から解決すると、機能します:
これは何らかの非同期プロセスの webpack に何らかの形で関連していると思います。質問を編集させていただきます。