suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Webpack: Einige CSS-Stileigenschaften werden nicht angewendet oder werden nicht ausgeführt

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:

P粉111627787P粉111627787276 Tage vor333

Antworte allen(1)Ich werde antworten

  • P粉342101652

    P粉3421016522024-02-27 12:29:11

    我发现了问题：与实际图像的路径有关。

    之前存储在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 相关。我将编辑问题。

    Antwort
    0
  • StornierenAntwort