Symfony 6.1.4项目无法使用Bootstrap 5.2，需调整哪些配置？

我搭建了一个Symfony 6.1.4新项目，目前无法正常使用Bootstrap 5.2（比如模板里的列布局没生效）。对比了一个正常运行的6.1版本项目的配置，没发现明显差异。下面是当前项目的配置文件和运行信息，需要调整哪些内容？

现有配置文件 #

app.js #

import './styles/app.scss';

// start the Stimulus application
import './bootstrap';

const $ = require('jquery');

require('bootstrap');

$(document).ready(function() {
    $('[data-toggle="popover"]').popover();

    $('.js-datepicker').datepicker({
        format: 'yyyy-mm-dd'
    });
});

styles/app.scss #

@import "~bootstrap/scss/bootstrap"

webpack.config.js #

const Encore = require('@symfony/webpack-encore');

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/app.js')

    .enableStimulusBridge('./assets/controllers.json')

    .splitEntryChunks()

    .enableSingleRuntimeChunk()

    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())

    .configureBabel((config) => {
        config.plugins.push('@babel/plugin-proposal-class-properties');
    })

    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    .enableSassLoader()
;

module.exports = Encore.getWebpackConfig();

yarn dev 运行输出 #

5 files written to public\build
Entrypoint app [big] 2.56 MiB = runtime.js 14.6 KiB vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_bootstrap_dist_js_boo-43ff9a.js 1.88 MiB app.css 668 KiB app.js 20.2 KiB
webpack compiled successfully

base.html.twig #

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% 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>

default.html.twig #

{% extends 'base.html.twig' %}
{% block body %}
    <div class="row">
        <div class="col-4">Column 1</div>
        <div class="col-4">Column 2</div>
    </div>
{% endblock %}

渲染结果 #

Column 1
Column 2

修复步骤 #

1. 修复SCSS语法错误
   styles/app.scss末尾缺少分号，会导致Sass编译异常，Bootstrap样式无法正常生成。修改为：

   @import "~bootstrap/scss/bootstrap";
   

2. 移除不必要的jQuery依赖
   Bootstrap 5已完全移除jQuery依赖，保留jQuery可能引发冲突。删除代码中的：

   const $ = require('jquery');
   

   同时，Bootstrap 5的弹窗触发属性已改为data-bs-toggle，替换原data-toggle：

   $('[data-bs-toggle="popover"]').popover();
   

3. 验证CSS加载状态
   打开浏览器开发者工具，确认app.css已成功加载，且包含.row、.col-*等Bootstrap网格样式。若未加载，重新运行yarn dev并清理浏览器缓存后刷新页面。

4. 确认Sass依赖安装
   确保已安装Sass相关依赖，若未安装执行：

   yarn add sass-loader sass --dev
   

完成以上调整后，重新编译资源，Bootstrap网格布局即可正常生效。

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