[Symfony6 系列] Bootstrap

Webpack Encore 安装

node 部分

安装完成后会增加一个 assets 目录,自动安装了 stimulus

  • assets/app.js
  • assets/bootstrap.js
  • assets/controllers.json
  • assets/styles/app.css
  • assets/styles/global.scss
  • assets/controllers/hello_controller.js

配置 webpack.config.js , 启用 Sass/SCSS

在 styles 目录下新增 scss 目录自定义 bootstrap 主题样式(下载测试主题)

修改 global.scss

引入 JS 和 CSS 文件,修改父模板templates/base.html.twig

前端打包

npm run build

参考文章:

[1]  https://symfony.com/doc/current/frontend.html Encore

[2]  https://symfony.com/doc/current/frontend/encore/simple-example.html Encore 示例

[3]  https://github.com/StartBootstrap/startbootstrap-freelancer css

[4]  https://themes.getbootstrap.com/preview/?theme_id=46793 参考css

[5]  https://ux.symfony.com/ symfony UX

发表评论