Symfony 2.8 app no style 加载资源失败答案

【问题标题】：Symfony 2.8 app no style failed to load resourcesSymfony 2.8 app no style 加载资源失败
【发布时间】：2017-11-18 11:09:04
【问题描述】：

我正在 Dev env 中开发一个 Symfony 2.8 应用程序，除了没有样式外，所有内容都会加载。 Javascript 和 CSS 文件似乎没有加载。

这是我的 base.html.twig 文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>{% block meta_title %}Welcome!{% endblock %}</title>
        <link href="{{ asset('public/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet">
        <link href="{{ asset('public/bootstrap-table/dist/bootstrap-table.min.css') }}" rel="stylesheet">
        <link href="{{ asset('public/components-font-awesome/css/font-awesome.min.css') }}" rel="stylesheet">
        <link href="{{ asset('public/select2/select2.css') }}" rel="stylesheet">
        <link href="{{ asset('bundles/admin/css/select2-bootstrap.css') }}" rel="stylesheet">
        <link href="{{ asset('bundles/admin/css/styles.css') }}" rel="stylesheet">
        <link href="{{ asset('public/multiselect/css/multi-select.css') }}" rel="stylesheet">
    {% block stylesheets %}
    {% endblock %}
        <script src="{{ asset('public/jquery/dist/jquery.min.js') }}"></script>
        <script src="{{ asset('public/bootstrap/dist/js/bootstrap.min.js') }}"></script>
        <script src="{{ asset('public/bootstrap-table/dist/bootstrap-table.min.js') }}"></script>
        <script src="{{ asset('public/bootstrap-table/dist/extensions/cookie/bootstrap-table-cookie.min.js') }}"></script>
        <script src="{{ asset('public/jquery.maskedinput/src/jquery.maskedinput.js') }}"></script>
        <script src="{{ asset('public/select2/select2.min.js') }}"></script>
        <script src="{{ asset('public/moment/min/moment.min.js') }}"></script>
        <script src="{{ asset('public/multiselect/js/jquery.multi-select.js') }}"></script>
    {% block top_javascripts %}
    {% endblock %}
    <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body class='skin-blue sidebar-mini'>
    <noscript>
        <div class="global-site-notice noscript">
            <div class="notice-inner">
                <p>
                    <strong>JavaScript is disabled in your browser.</strong><br>
                    Please enable JavaScript settings in your browser to allow this website work correctly.
                </p>
            </div>
        </div>
    </noscript>
    <div class='wrapper'>
    {% block body %}{% endblock %}
     <footer class="navbar-fixed-bottom footer text-muted main-footer">
        &copy;&nbsp;{{ "now"|date("Y") }} TCX - All rights reserved &nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;Version-
         1.1.133
    </footer>
    </div>
    {% block bottom_javascripts %}
        <script src="{{ asset('public/jquery-slimscroll/jquery.slimscroll.min.js') }}"></script>
        <script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
        <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
        <script src="{{ asset('bundles/admin/js/scripts.js') }}"></script>
    {% endblock %}

    <!-- form focus -->
    <script type="text/javascript">
        if($('form:first .has-error').length == 0) {
            $('form:first *:input[type!=hidden]:enabled:first').focus();
        }
    </script>

这是我的 Bower.JSON：

</body>
</html> 
{
  "name": "NULL",
  "authors": [
    "NULL"
  ],
  "description": "",
  "main": "",
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap": "^3.3.7",
    "components-font-awesome": "^4.6.3",
    "jquery-slimscroll": "^1.3.8",
    "bootstrap-table": "^1.0.0",
    "bootstrap-fileinput": "^4.3.5",
    "jquery-timepicker-jt": "^1.11.0",
    "datepair.js": "^0.4.0",
    "jquery.maskedinput": "^1.4.*",
    "select2": "3.2",
    "moment": "2.17.1",
    "fullcalendar": "3.1.0",
    "fullcalendar-scheduler": "1.5.0",
    "multiselect": "0.9.12"
  }
}

所需的 Javascript 和 CSS 文件位于此 Bower.JSON 文件中。所以我跑了Bower Install，所有的包都安装到了public/ 但是，当我运行应用程序 php app/console server:run 时，一切都运行了，但缺少样式。

已尝试清除缓存 php app/console cache:clear 和 php app/console assets:install web。非常感谢所有帮助！

Picture of Error Log from Safari

【问题讨论】：

您是否将这些资源包含在您的主 (base.html.twig) 树枝模板中？即使在安装资产并运行 bower 之后也需要引用它们
如果你使用 AsseticBundle 那么你需要运行php app/console assets:install web --symlink 然后php app/console assetic:dump
嗨，Jake，我不相信我有 base.html.twig 文件。我有一个安装在供应商> Twig 中的Twig 文件夹。必须要有一个吗？
@LaurynasGerbutavicius 刚刚尝试过，没有运气：/
@JakeLitwicki 我找到了 base.html.twig 文件，所有内容都包含在这里

标签： php css symfony bower symfony-2.8

【解决方案1】：

解决方案是在 web/public 下安装 bower 组件。在 public/ 下安装它们之前。

需要注意的是，如果您使用 Symfony 部署应用程序，请确保所需的包位于 web 文件夹下。

【讨论】：