Symfony项目继承base模板的页面Bootstrap样式不生效怎么解决

1. 优先排查静态资源加载错误 #

打开故障页面按下F12调出浏览器开发者工具，切换到「网络」标签页，刷新页面查看bootstrap.min.css以及相关JS资源的加载状态：

• 如果返回404状态码，即可确认是资源引用路径错误导致的样式失效。

2. 修复base.html.twig中的两处资源引用错误 #

当前基础模板存在两个明显的资源引用问题：

问题1：使用相对路径引用静态资源 #

你写的href="css/bootstrap.min.css"是相对路径，会根据当前页面的路由层级变化资源查找路径：

• 路由为/cours这类一级路径时，会请求/css/bootstrap.min.css（正常加载）
• 路由为/cours/new这类二级路径时，会请求/cours/css/bootstrap.min.css（资源不存在，返回404）

问题2：JS标签语法错误 #

你编写的script标签多写了多余的>符号：src="/>js/jquery.js"，本身属于错误语法，无法正常加载JS资源。

修正后的资源引用代码 #

Symfony中推荐使用asset()函数生成静态资源的绝对路径，修正后的对应代码段如下：

{% block stylesheets %}    
    <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}"/>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('js/jquery.js') }}"></script>
    <script src="{{ asset('js/popper.min.js') }}"></script>
    <script src="{{ asset('js/bootstrap.js') }}"></script>
{% endblock %}

补充：如果你的项目没有安装Symfony Asset组件，也可以直接写绝对路径，在资源路径开头加/即可，比如<link rel="stylesheet" href="/css/bootstrap.min.css"/>

3. 排查子模板是否覆盖了父模板样式块 #

如果子页面中编写了{% block stylesheets %}块但没有调用{{ parent() }}，会直接覆盖父模板的样式引入，导致样式丢失。如果需要在子页面新增额外样式，写法如下：

{% block stylesheets %}
    {{ parent() }}
    {# 这里写子页面额外的样式引入 #}
{% endblock %}

4. 清理缓存验证效果 #

修改完成后执行Symfony缓存清理命令：
php bin/console cache:clear
刷新故障页面即可验证样式是否恢复正常。

内容的提问来源于stack exchange，提问作者Ilyass El