html twig 文件在 Symfony 应用程序中找不到我的 css 文件的路径

Question

我在 symfony 中开始了一个新项目。我对它很陌生，但我遵循了 symfony 文档中的所有安装说明：

/* assets/styles/app.css */
body {
    background-color: rgb(177, 44, 44);
}
 h1{
     color: red;
 }

 h2{
     color:purple;
     border: 1px solid black;
 }

{% extends 'base.html.twig' %}

{% block body %}

    <h1> Bienvenue à tous </h1>
    <h2> Bienvenue 2 </h2>

{% endblock %}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {# Run `composer require symfony/webpack-encore-bundle`
           and uncomment the following Encore helpers to start using Symfony UX #}
        <link rel="stylesheet" href="assets\styles\app.css" type="text/css">
        {% block stylesheets %}
            {#{{ encore_entry_link_tags('app') }}#}
        {% endblock %}

        {% block javascripts %}
            {#{{ encore_entry_script_tags('app') }}#}
        {% endblock %}
    </head>
    <body>
    <div class="container">
        {% block body %}{% endblock %}
    </div>
    </body>
</html>

[在此处输入图片描述][1] 设置。我用 yarn 包管理器下载了 webpack-encore-bundle 包。我觉得我的()放的很好，但是我的html文件找不到我的css.

的路径

这是我的文件 [1]: https://i.stack.imgur.com/RA9FJ.png

我的网络浏览器控制台告诉我这个“net::ERR_ABORTED 404（未找到）”

Answer 1

使用 Webpack Encore

您不应自己编写 <link> 标签，而应使用注释的 encore_entry_link_tags。 encore_entry_link_tags 将确保它指向由 Webpack Encore 生成的文件（例如在调用 yarn encore dev 之后）。

当你使用 Webpack Encore 时，使用 webpack.config.yaml 指向你的 CSS in assets 使用 addEntry('app', ...file..) （或者可能 addStyleEntry，但 addEntry 应该没问题）。 Webpack Encore 取assets/styles/app.css下的文件，然后默认public/build下放到public/里。根据您的配置，您的文件名可能不会在该过程中保持不变。好消息是 Webpack Encore 通常会为你处理好一切。（如果没有，请随时为此提出问题）。

另请参阅：https://symfony.com/doc/current/frontend/encore/simple-example.html

不使用 Webpack Encore 时

您应该使用正斜杠，例如assets/styles/app.css。如果你不使用 Webpack Encore，那么你应该确保你的文件在 public/assets/styles/app.css 中，以便你的浏览器可以访问它。您还应该将其包装到另一个名为 asset 的辅助函数中。换句话说，它应该看起来像（假设路径是正确的）：

<link rel="stylesheet" href="{{ path('assets/styles/app.css') }}" type="text/css">

这样做的目的是确保您的路径是相对于文档根目录（您的 public/ 目录）而不是相对于 url。这很重要，因为否则你的路径将不会有相同的结果，具体取决于你是否在 https:/example.com 与 https://example.com/blog 上，因为它会在中寻找你的 css不同的地方（public/assets/styles/app.css 或 public/blog/assets/styles/app.css）。

html twig 文件在 Symfony 应用程序中找不到我的 css 文件的路径

html twig file can't find the path to my css file in Symfony app

html

css

symfony

twig

使用 Webpack Encore

不使用 Webpack Encore 时