将引导程序添加到 symfony 应用程序的正确方法是什么？

Question

我正在使用 symfony 框架 3 来开发一个 Web 应用程序。我需要将 boostrap 的功能添加到我的应用程序中。我使用以下命令安装了引导程序。 （我正在使用作曲家。）

composer require twbs/bootstrap

它将引导程序安装到应用程序的供应商文件夹。更具体地说是vendor\twbs\bootstrap。

我需要将引导程序的css 和js 文件附加到应用程序的树枝模板（位于app\Resources\views）中作为资产。

例如：

<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet" />

但资产仅适用于位于 web (web\bundles\framework) 文件夹中的文件。我可以手动将这些 .css 和 .js 文件从供应商文件夹复制到 web 文件夹以使其工作，但应该有适当的方法来做到这一点（即：添加资产）。例如：带有bin/console的命令？

感谢任何帮助。

Answer 1

Symfony 最佳实践给出了这个问题的答案：https://symfony.com/doc/current/best_practices.html#web-assets

如果您正在开发这样的应用程序，您应该使用技术推荐的工具，例如 Bower 和 GruntJS。您应该将前端应用程序与您的 Symfony 后端分开开发（如果您愿意，甚至可以将存储库分开）。

在我们的项目中，我们使用 grunt 构建这些文件并将其连接到 web 文件夹中。

Answer 2

由于 Symfony v2.6 包含一个为 Bootstrap 3 设计的新表单主题oficial documentation

# app/config/config.yml
twig:
    form:
        resources: ['bootstrap_3_layout.html.twig']
        # resources: ['bootstrap_3_horizontal_layout.html.twig']

Answer 3

看起来这在 Symfony3 中不再有效。

在 Symfony3 中，以下应该可以工作：

twig:
    form_themes: ['bootstrap_3_layout.html.twig']

Answer 4

从此链接https://coderwall.com/p/cx1ztw/bootstrap-3-in-symfony-2-with-composer-and-no-extra-bundles（并更改twitterfor twbs）这是我在config.yml 中的内容：

assetic:
    debug:          '%kernel.debug%'
    use_controller: '%kernel.debug%'
    filters:
        cssrewrite: ~
        jsqueeze: ~
        scssphp:
            formatter: 'Leafo\ScssPhp\Formatter\Compressed'
    assets:
        jquery:
            inputs:
                - %kernel.root_dir%/../vendor/components/jquery/jquery.js
        bootstrap_js:
            inputs:
                - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/js/bootstrap.js
        bootstrap_css:
            inputs:
                - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/css/bootstrap.css
                - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/css/bootstrap-theme.css
            filters: [ cssrewrite ]
        bootstrap_glyphicons_ttf:
            inputs:
                - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf
            output: "fonts/glyphicons-halflings-regular.ttf"
        bootstrap_glyphicons_eot:
            inputs:
                - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/fonts/glyphicons-halflings-regular.eot
            output: "fonts/glyphicons-halflings-regular.eot"
        bootstrap_glyphicons_svg:
            inputs:
                - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/fonts/glyphicons-halflings-regular.svg
            output: "fonts/glyphicons-halflings-regular.svg"
        bootstrap_glyphicons_woff:
            inputs:
                - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/fonts/glyphicons-halflings-regular.woff
            output: "fonts/glyphicons-halflings-regular.woff"

我的composer.json 中确实有其他依赖项，例如jsqueeze，或Leafo 的scss 处理器，jquery 等等。我的作曲家文件中有这个：

    "components/font-awesome": "^4.7",
    "components/jquery": "^3.1"
    "leafo/scssphp": "^0.6.7",
    "patchwork/jsqueeze": "^2.0",
    "symfony/assetic-bundle": "^2.8",
    "twbs/bootstrap": "^3.3",

然后我将它用于 css：

{% stylesheets
    '@bootstrap_css'
    'my/other/scss_file1.scss'
    'my/other/scss_file2.scss'

    filter='scssphp,cssrewrite'
    output='css/HelloTrip.css' %}

    <link href="{{ asset_url }}" type="text/css" rel="stylesheet"/>

{% endstylesheets %}

对于 javascript，请先放置 jquery：

{% javascripts
    '@jquery'
    '@bootstrap_js'
    'my/other/js_file1.js'
    'my/other/js_file2.js'

    filter='?jsqueeze'
    output='js/HelloTrip.js' %}

    <script src="{{ asset_url }}"></script>

{% endjavascripts %}

然后我使用bin/console assetic:dump 编译我的所有资产。

希望能提供帮助！

Answer 5

作为替代解决方案，可以在软件包更新时自动创建符号链接。比如在composer.json"post-update-cmd"中添加新命令：

// ...
"scripts": {
        "post-install-cmd": [
            "@symfony-scripts"
        ],
        "post-update-cmd": [
            "@symfony-scripts",
            "rm web/bootstrap && ln -s -r `pwd`/vendor/twbs/bootstrap/dist/ web/bootstrap"
        ]
    },

Answer 6

建议的方法changed 从 Symfony 版本 4 开始：Webpack Encore 与 npm / yarn 一起用于捆绑 CSS 和 JavaScript 资源，其中可以包含 Bootstrap 框架。

从installing Encore 开始，然后是the Bootstrap-specific documentation。总之，必须执行以下命令：

composer require symfony/webpack-encore-bundle
yarn install
yarn add bootstrap --dev

# after making the required changes to webpack.config.js, app.js, run Encore
yarn encore dev --watch