Html файл ветки не может найти путь к моему файлу css в приложении Symfony
Я начал новый проект в 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] настроен. Я загрузил пакет webpack-encore-bundle с менеджером пакетов пряжи. Я думаю, что my () хорошо размещен, но мой html файл не может найти путь к моему css.
вот мои файлы [1]: https://i.stack.imgur.com/RA9FJ.png
моя консоль сетевого браузера сообщает мне это "net :: ERR_ABORTED 404 (Not Found)"
Моя проблема решена. Я не завершил часть создания актива. В моей общей папке ничего не было. Итак, я выполнил команду «yarn encore dev», и теперь у меня есть папка сборки внутри общедоступной. Я изменил ссылку css для (<link rel = "stylesheet" href = "/ build / app.css">), и теперь она работает. Спасибо за ваш ответ.
Ответы 1
С Webpack Encore
Вам не следует писать свой <link>-тег самостоятельно, вместо этого используйте прокомментированный encore_entry_link_tags. encore_entry_link_tags убедится, что он указывает на файл, созданный Webpack Encore (например, после вызова yarn encore dev).
Когда вы используете Webpack Encore, используйте webpack.config.yaml, чтобы указать на ваш CSS в активах с помощью addEntry('app', ...file..) (или, возможно, addStyleEntry, но addEntry подойдет). Webpack Encore берет файл под assets/styles/app.css, а затем помещает его в public/ по умолчанию public/build. В зависимости от вашей конфигурации может случиться так, что ваше имя файла не останется прежним во время этого процесса. Хорошо то, что 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).
Спасибо. Я не запускал (yarn encore dev), и в моей общей папке ничего не было. Теперь у меня есть папка сборки, я изменил ссылку css на (<link rel = "stylesheet" href = "/ build / app.css">), и теперь она работает.
Если вы используете Encore, использование /build/app.css может быть небезопасным в зависимости от конфигурации вашего веб-пакета. Например, если вы запустите yarn encore prod, он может добавить в файл идентификатор версии, который в вашем примере не улавливается. Обязательно используйте помощники или убедитесь, что ваша конфигурация также обеспечивает ожидаемый результат в prod.
Хорошо, но что вы имеете в виду под вспомогательной функцией или помощниками? И у меня нет общедоступной папки с активами. У меня есть папка с активами отдельно от общедоступной, как вы можете видеть на скриншоте из моего первого поста. Это нормально? Срри, я многого прошу, но сейчас я новичок
Те, что в {% block stylesheets %} и {% block javascripts %}. Они создадут для вас правильные теги <link> и <script> (если необходимо, иначе они будут пустыми). Вам просто нужно заменить {# #} (комментарий) на {{ }}, например. {{ encore_entry_link_tags('app') }}.
Что вы пробовали для устранения проблемы? Папка
publicсодержит папкуassetsили символическую ссылку на данную?