Comment utiliser twitter bootstrap utiliser assetic et moins dans symfony2?
Je ne peux pas obtenir twitter bootstrap de travail. Je sais qu'il existe de nombreux tutoriels et ainsi de suite, mais aucune ne fonctionne pour moi...
Mon compositeur.json est:
"require":
[...]
"leafo/lessphp": "dev-master",
"braincrafted/bootstrap-bundle": "dev-master",
"twbs/bootstrap": "2.3.*"
Mon assetic configuration est la suivante:
# Assetic Configuration
assetic:
filters:
lessphp:
file: %kernel.root_dir%/../vendor/leafo/lessphp/lessc.inc.php
apply_to: "\.less$"
cssrewrite: ~
assets:
bootstrap_css:
inputs:
- %kernel.root_dir%/../vendor/twbs/bootstrap/less/bootstrap.less
- %kernel.root_dir%/../vendor/twbs/bootstrap/less/responsive.less
filters:
- lessphp
- cssrewrite
output: css/bootstrap.css
bootstrap_js:
inputs:
- %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-transition.js
- %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-alert.js
- %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-button.js
- %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-carousel.js
- %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-collapse.js
- %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-dropdown.js
- %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-modal.js
- %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-tooltip.js
- %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-popover.js
- %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-scrollspy.js
- %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-tab.js
- %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-typeahead.js
- %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-affix.js
output: js/bootstrap.js
Et enfin ::base.html.twig
:
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}">
{% endblock %}
{% block javascripts %}
<script src="{{ asset('js/bootstrap.js') }}"></script>
{% endblock %}
J'essaie d'inclure js sna css différentes façons, par exemple:
{% stylesheets '%kernel.root_dir%/../vendor/twbs/bootstrap/less/bootstrap.less' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
ou
{% stylesheets '@bootstrap_css' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
mais il ne fonctionne toujours pas et j'obtiens des erreurs 404 pour bootstrap.css et bootstrap.js.
Quoi de mal avec ma config? J'utilise wamp server sur windows 7 64 bits.
La seule façon de le faire est d'utiliser la commande cli assetic:dump
mais je pense que c'est pas la bonne façon de le faire sur l'environnement de dev.
Je ne suis pas vraiment sûr, mais il semble que vous avez d'appeler le assetic:dump commande pour générer le nouveau les fichiers css et js. Ils doivent être fusionnés que vous n'avez qu'un seul fichier.
Quand je le fais, alors il génère de nombreux fichiers css et js (en fait, ils sont répertoriés dans assetic
Il crée beaucoup de fichiers, car vous êtes en cours d'exécution sur votre dev-environnement, si vous exécutez la commande
Ok, mais une chose - j'ai des rouges plusieurs tutoriels, bootstrap doc aussi, mais il n'y avait pas mension sur l'utilisation de
Les dossiers sont correctement générée dans votre web-dossier?
Quand je le fais, alors il génère de nombreux fichiers css et js (en fait, ils sont répertoriés dans assetic
inputs
section) et fait un peu désordre. Je pensais que si je suis en utilisant assetic et moins puis c'est assez pour appeler <link href="{{ asset('css/bootstrap.css') }}">
qu'elle est définie dans assetic output
section et bootstrap.css
sera généré.Il crée beaucoup de fichiers, car vous êtes en cours d'exécution sur votre dev-environnement, si vous exécutez la commande
assetic:dump --env=prod
vous remarquez qu'il y aura moins de fichiersOk, mais une chose - j'ai des rouges plusieurs tutoriels, bootstrap doc aussi, mais il n'y avait pas mension sur l'utilisation de
assetic:dump
(voir http://bootstrap.braincrafted.com/getting-started donc, même si cela fonctionne après cette commande, je pense que ce n'est pas la bonne solution.Les dossiers sont correctement générée dans votre web-dossier?
OriginalL'auteur zelazowy | 2013-09-23
Vous devez vous connecter pour publier un commentaire.
Enfin, j'ai utilisé simplement les fichiers js et css de bootstrap, sans bundle symfony car il est plus rapide, plus facile et peut avoir certains avantages tels que la mise à jour de bootstrap ne va pas planter mon site (voir mise à jour de bootstrap 2 à 3...).
Merci donc à tous pour vos réponses, mais c'est pour moi la meilleure solution.
/css
répertoire, puis de référence que dans votre{% stylesheets %}
section. Pouvez-vous poster le code? J'ai à peu près le même problème que vous, même si je préfère de tirer parti des avantages de Assetic.Ouais, je viens de copier
css
etjs
fichiers dansweb
et la référence directement dans le modèle. Il est assez boiteux, mais malheureusement c'était la seule solution pour moi. Mais c'est alors que j'ai utilisé Windows, de sorte que peut être certains OS liés question.Je vais essayer plus tard et de voir comment ça se passe, mais je suis désireux d'obtenir
lessphp
et Assetic de travail avec Bootstrap.Oui, je suppose que c'est la façon la plus simple pour importer un thème, mais je suis toujours désireux de le faire fonctionner avec MOINS et Bootstrap. Je peux confirmer cette approche simpliste fonctionne bien.
OriginalL'auteur zelazowy
Voici donc la réponse définitive à votre question:
Vous devez l'exécuter en manuel en raison de l'impact sur les performances. Sinon, si vous utilisez trop de filtres qu'il faut pour long à charger l'application et qui peuvent être vraiment frustrant.
Dans les anciennes versions de symfony, il semble qu'il a été fait automatique, mais sont maintenant supprimés.
Voir la documentation: http://symfony.com/doc/current/cookbook/assetic/asset_management.html#dumping-asset-files-in-the-dev-environment
Donc tout est ok avec votre code et de configuration.
OriginalL'auteur sensi
Essayez d'ajouter ceci à votre config_dev.yml:
config_dev.yml
par défaut et je n'ai pas le modifier.OriginalL'auteur Igor Pantović