web-dev-qa-db-de.com

Was ist der richtige Weg, um einer Symfony-App Bootstrap hinzuzufügen?

Ich verwende Symfony Framework 3, um eine Webanwendung zu entwickeln. Ich muss die Funktionalität von boostrap zu meiner Anwendung hinzufügen. Ich habe bootstrap mit dem folgenden Befehl installiert. (Ich benutze Komponist.)

composer require twbs/bootstrap

Es installiert Bootstrap im Herstellerordner der Anwendung. Genauer gesagt vendor\twbs\bootstrap.

Ich muss die css- und js-Dateien von bootstrap in den Zweigvorlagen der Anwendung (in app\Resources\views) als Assets anhängen. 

z.B.:

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

Assets funktionieren jedoch nur mit Dateien, die sich im Webordner (web\bundles\framework) befinden. Ich kann diese .css- und .js-Dateien manuell aus dem Vendor-Ordner in den Web-Ordner kopieren, damit dies funktioniert, aber es sollte eine geeignete Methode dafür geben (d. H .: zum Hinzufügen von Assets). Beispiel: Ein Befehl mit bin/console?

Jede Hilfe wird geschätzt. 

11
Wickramaranga

Die besten Praktiken von Symfony gibt die Antwort auf dieses Problem: http://symfony.com/doc/current/best_practices/web-assets.html

Wenn Sie eine solche Anwendung entwickeln, sollten Sie die von der Technologie empfohlenen Tools wie Bower und GruntJS verwenden. Sie sollten Ihre Frontend-Anwendung separat von Ihrem Symfony-Backend entwickeln (ggf. sogar die Repositorys trennen).

In unserem Projekt verwenden wir grunt, um diese Dateien im Web-Ordner zu erstellen und zu speichern.

5
fucethebads

Anscheinend funktioniert das in Symfony3 nicht mehr. 

In Symfony3 sollte Folgendes funktionieren:

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

Seit Symfony v2.6 enthält ein neues Formular-Design für Bootstrap 3oficial documentation

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

Von diesem Link https://coderwall.com/p/cx1ztw/bootstrap-3-in-symfony-2-with-composer-and-no-extra-bundles (und Ändern von Twitterfür twbs) ist dies das, was ich habe in meinem 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"

Ich habe andere Abhängigkeiten in meinem composer.json, wie zum Beispiel jsqueeze oder Leafs scss-Prozessor, zwischen jquery und mehr. Ich habe dies in meiner Komponistendatei:

    "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",

Ich verwende es dann so für die 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 %}

und für die Javascripts platzieren Sie zuerst 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 %}

Ich verwende dann bin/console assetic:dump, um alle meine Assets zu kompilieren.

Hoffe zu helfen!

3
Xavi Montero

Der vorgeschlagene Ansatz changed seit Symfony Version 4: Webpack Encore wird zusammen mit npm/garn zum Bündeln der CSS- und JavaScript-Ressourcen verwendet, wo das Bootstrap-Framework enthalten sein kann.

Beginnen Sie mit Installieren von Encore und folgen Sie der Bootstrap-spezifischen Dokumentation . Zusammenfassend müssen folgende Befehle ausgeführt werden:

composer require encore
yarn install
yarn add bootstrap --dev

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

Als alternative Lösung können die Symlinks automatisch beim Aktualisieren der Pakete erstellt werden. Fügen Sie in composer.json beispielsweise einen neuen Befehl in "post-update-cmd" hinzu:

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