cari

Rumah  >  Soal Jawab  >  teks badan

Webpack: Sesetengah sifat gaya css tidak digunakan atau tidak berjalan

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:

P粉111627787P粉111627787272 hari yang lalu318

membalas semua(1)saya akan balas

  • P粉342101652

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

    Saya dapati masalahnya: ia ada kaitan dengan laluan imej sebenar.

    Sebelum ini disimpan di bawah assets/images/image1.jpg

    Saya menggunakannya dalam templat ranting saya seperti ini:

    Kini, saya menggunakan Webpack Encore .copyFiles()函数将图像存储在public/build/imagesMuat turun

    webpack.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.

    balas
    0
  • Batalbalas