J'utilise symfony framework 3 pour développer une application Web. Je dois ajouter les fonctionnalités de boostrap à mon application. J'ai installé bootstrap en utilisant la commande ci-dessous. (J'utilise compositeur.)
composer require twbs/bootstrap
Il installe bootstrap dans le dossier du fournisseur de l'application. Plus spécifiquement vendor\twbs\bootstrap
.
J'ai besoin de joindre les fichiers css
et js
de bootstrap dans les modèles de brindille de l'application (situés dans app\Resources\views
) en tant qu'actifs.
par exemple.:
<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet" />
Mais les ressources ne fonctionnent qu'avec des fichiers situés dans le dossier Web (web\bundles\framework
). Je peux copier manuellement ces fichiers .css
et .js
du dossier du fournisseur vers le dossier Web pour que cela fonctionne, mais il devrait exister une méthode appropriée pour le faire (c'est-à-dire: ajouter des éléments). Exemple: une commande avec bin/console
?
Toute aide est appréciée.
Les meilleures pratiques de Symfony donnent la réponse à ce problème: http://symfony.com/doc/current/best_practices/web-assets.html
Si vous développez une application comme celle-ci, vous devez utiliser les outils recommandés par la technologie, tels que Bower et GruntJS. Vous devez développer votre application frontend séparément de votre serveur Symfony (même en séparant les référentiels si vous le souhaitez).
Dans notre projet, nous utilisons grunt pour créer et concaténer ces fichiers dans le dossier Web.
Il semble que cela ne fonctionne plus dans Symfony3.
Dans Symfony3, les éléments suivants devraient fonctionner:
twig:
form_themes: ['bootstrap_3_layout.html.twig']
Depuis Symfony v2.6 inclut un nouveau thème de formulaire conçu pour Bootstrap 3documentation officielle
# app/config/config.yml
twig:
form:
resources: ['bootstrap_3_layout.html.twig']
# resources: ['bootstrap_3_horizontal_layout.html.twig']
À partir de ce lien https://coderwall.com/p/cx1ztw/bootstrap-3-in-symfony-2-with-composer-and-no-extra-bundles (et changer Twitter
pour twbs
) c'est ce que je avoir dans mon 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"
J'ai d'autres dépendances dans mon composer.json
, comme jsqueeze
par exemple, ou le processeur scss de Leafo, parmi jquery
et plus. J'ai ceci dans mon dossier de compositeur:
"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",
Je l'utilise alors comme ça pour le 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 %}
et pour les javascripts, placez jquery
en premier:
{% 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 %}
J'utilise ensuite bin/console assetic:dump
pour compiler tous mes actifs.
J'espère aider!
L'approche suggérée changé depuis Symfony version 4: Webpack Encore est utilisée avec npm/yarn pour regrouper les ressources CSS et JavaScript, dans lesquelles le cadre Bootstrap peut être inclus.
Commencez par en installant Encore et suivez avec la documentation spécifique à Bootstrap . En résumé, les commandes suivantes doivent être exécutées:
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
Comme solution alternative, les liens symboliques pourraient être créés automatiquement lors de la mise à jour des packages. Par exemple, dans composer.json
, ajoutez une nouvelle commande dans "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"
]
},