Symfony 5.3通过Encore安装使用Bootstrap失败如何解决

问题排查及解决步骤 #

• 路径引入错误：你在app.js中导入的样式文件是./styles/app.scss，但你将Bootstrap的引入语句写在了app.css中，且app.scss为空，Webpack编译时无法加载到Bootstrap样式。
  解决方法：将@import '~bootstrap/scss/bootstrap';移动到app.scss文件中即可。

• Twig块覆盖丢失父级内容：你在index.html.twig中重写了javascripts块，没有调用父级块内容，导致base.html.twig中定义的{{ encore_entry_script_tags('app') }}没有被渲染到页面。
  解决方法：修改index.html.twig的javascripts块，添加{{ parent() }}继承父级内容：

  {% block javascripts %}
      {{ parent() }}
      <script>
          console.log('test');
      </script>
  {% endblock %}
  

• 确认Webpack配置开启Sass支持：检查项目根目录的webpack.config.js文件，确认存在以下配置：

  .enableSassLoader()
  

  若无该行配置，需要添加后重新编译资源。

• 必须执行资源编译命令：所有配置修改完成后，需要运行Encore命令编译静态资源才会生效：

  # 开发环境单次编译
  yarn dev
  # 开发环境实时监听改动自动编译
  yarn dev-server
  # 生产环境编译
  yarn build
  

• 可选版本适配检查：如果你安装的是Bootstrap 5，原Bootstrap 4的form-group类已被移除，表单间距改用margin工具类实现。你可以先验证btn btn-primary样式是否生效，只要按钮样式正常即说明Bootstrap已成功引入，再对应版本调整类名即可。

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