CSS и javascript не работают в проекте Symfony
Недавно я начал новый проект в Symfony и все сделал здесь но это не помогло.
Я впервые работаю с Symfony и это мой первый проект. Я строго следую документации и пытаюсь добавить CSS, но теперь он работает. Я использую Encore и скачал Yarn, как сказано в документации. Ниже я загружу часть своего кода. Вроде нормально, но это не так.
html.twig
<!DOCTYPE html>
<html lang = "en" xmlns:th = "http:thymeleaf.org">
<head>
<title>Events & People</title>
<meta charset = "UTF-8">
{% block stylesheets %}
{#{% stylesheets '@AppBundle/public/build/app.css' %}#}
{{ encore_entry_link_tags('app') }}
<link src = "/build/app.css" rel = "stylesheet"/>
{#{% endstylesheets %}#}
{% endblock %}
</head>
webpack.config.js
var Encore = require('@symfony/webpack-encore');
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
// only needed for CDN's or sub-directory deploy
//.setManifestKeyPrefix('build/')
/*
* ENTRY CONFIG
*
* Add 1 entry for each "page" of your app
* (including one that's included on every page - e.g. "app")
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if you JavaScript imports CSS.
*/
.addEntry('app', './assets/js/app.js')
//.addEntry('page1', './assets/js/page1.js')
//.addEntry('page2', './assets/js/page2.js')
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
/*
* FEATURE CONFIG
*
* Enable & configure other features below. For a full
* list of features, see:
* https://symfony.com/doc/current/frontend.html#adding-more-features
*/
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
//11111111111
// .enableSassLoader()
//
// // processes files ending in .less
// .enableLessLoader()
//
// // processes files ending in .styl
// .enableStylusLoader()
//11111111111
// enables Sass/SCSS support
//.enableSassLoader()
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery()
;
module.exports = Encore.getWebpackConfig();
Вот изображение моего дерева файлов:
Если все сделано правильно, он должен загружать файлы с моего /build/app.css, но не загружает его.
1 Да, он не пустой 2 Когда я читал учебник в здесь и сделал это, он создал общую папку, и в документации было написано, как ее использовать. 3 Да, у меня есть ошибка, но я не знаю, связана ли она с CSS здесь
Хммм где отображается это сообщение? Кажется, что есть проблема не только с CSS / JS, если вся панель отладки ошибается. У вас есть дополнительная информация об этой ошибке или у вас только это сообщение? В консоли браузера (F12> вкладки консоли) есть ли у вас сообщение об ошибке?
Ответы 7
Я не искал глубоко, но одна плохая мысль - это ваш тег ссылки ...
Заменить (src на href)
<link src = "/build/app.css" rel = "stylesheet"/>
От
<link href = "/build/app.css" rel = "stylesheet"/>
Вы пробовали это:
<link src = "build/app.css" rel = "stylesheet"/>
удалить только ведущий "/" и посмотреть, работает ли это? хотя не уверен.
Переместите тег ссылки за пределы блока таблицы стилей. И используйте функцию twig asset () вместо абсолютного пути. PS: используйте href вместо src в теге ссылки
<!DOCTYPE html>
<html lang = "en" xmlns:th = "http:thymeleaf.org">
<head>
<title>Events & People</title>
<meta charset = "UTF-8">
<link href = "{{ asset('build/app.css') }}" type = "text/css" rel = "stylesheet"/>
{% block stylesheets %} {% endblock %}
</head>
Если вы действительно хотите разместить тег ссылки внутри блока таблицы стилей, вы должны вызвать это, используя функцию twig parent () в каждом представлении шаблона.
{% extends 'base.html.twig' %}
{% block stylesheets %}
{# call the parent content inside stylesheet block #}
{{ parent() }}
{# other css code here #}
{% endblock %}
Это тоже не помогло.
Я решил свою проблему, у меня просто ошибка в моем CSS, и yarn не скомпилировал ее
Для меня это была проблема кеширования. попробуем удалить кеш.
script и stylesheets должны находиться вне корпуса tag, вот так:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
</head>
<body>
{% block body %}{% endblock %}
</body>
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{% endblock %}
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{% endblock %}
</html>скрипт и таблицы стилей должны быть вне тега body, вот так!
> <!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
</head>
<body>
{% block body %}{% endblock %}
</body>
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{% endblock %}
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{% endblock %}
</html>
На всякий случай, ваш
public/build/app.cssне пустой, верно? Я не знал, что EncoreBundle изменился, поэтому я точно не знаю, что эти функцииencore_entry_*. Я посмотрю сегодня вечером. Кроме того, почему у вас есть файлstyle.scssв/public? И есть ли у вас ошибка во вкладке сети (консоль разработчика браузера)?