CSS 和 javascript 在 Symfony 项目中不起作用
Posted
技术标签:
【中文标题】CSS 和 javascript 在 Symfony 项目中不起作用【英文标题】：CSS and javascript not working in Symfony project 【发布时间】：2019-05-27 13:22:42 【问题描述】：我最近在 Symfony 开始了一个新项目，我做了所有事情 here 但它没有帮助。
我第一次使用 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 加载文件，但它没有加载它。
【问题讨论】：
可以肯定的是，您的public/build/app.css 不是空的，对吧？我不知道 EncoreBundle 发生了变化，所以我不知道那些 encore_entry_* 的功能到底是什么。我今晚去看看。另外，为什么/public 中有一个style.scss 文件？您在网络选项卡（浏览器开发控制台）中是否有任何错误？
1 是的，它不是空的 2 当我阅读here 中的教程并且我做到了时，它创建了一个公用文件夹，并在文档中编写了使用它。 3 是的，我有一个错误，但我不知道它是否来自 CSS here
嗯，这条消息在哪里显示？如果整个调试栏被窃听，似乎不仅仅是 CSS/JS 问题。您是否有有关该错误的更多信息，或者您只有此消息？在浏览器控制台（F12 > 控制台选项卡）中，您是否有任何错误消息？
【参考方案1】：
对我来说，这只是一个缓存问题。 让我们尝试删除缓存。
【讨论】：
【参考方案2】：我没有深入搜索，但一个不好的想法是你的链接标签......
替换（src 为 href）
<link src="/build/app.css" rel="stylesheet"/>
由
<link href="/build/app.css" rel="stylesheet"/>
【讨论】：
【参考方案3】：你试过了吗：
<link src="build/app.css" rel="stylesheet"/>
仅删除前导“/”并查看是否有效？不过不确定。
【讨论】：
【参考方案4】：将链接标签移到样式表块之外。并使用 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 %
【讨论】：
它也没有帮助。【参考方案5】：我解决了我的问题我只是在我的 CSS 中有一个错误并且 yarn 没有编译它
【讨论】：
【参考方案6】：脚本和样式表应该像这样在正文标记之外！
> <!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>【讨论】：
【参考方案7】：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>【讨论】：
以上是关于CSS 和 javascript 在 Symfony 项目中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
将 CSS 和 JavaScript 放在文件或主 HTML 中？
在 Rails 中去除内联 CSS 和 JavaScript
Python Flask 页面未使用外部 CSS 和 Javascript 呈现