How to use twitter bootstrap using assetic and less in symfony2?

Question

I can't get twitter bootstrap working. I know there is many tutorials and so on, but none of it works for me...

My composer.json is:

"require":
    [...]
    "leafo/lessphp": "dev-master",
    "braincrafted/bootstrap-bundle": "dev-master",
    "twbs/bootstrap": "2.3.*"

My assetic configuration is:

# 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

And finally ::base.html.twig:

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

{% block javascripts %}
    <script src="{{ asset('js/bootstrap.js') }}"></script>
{% endblock %}

I'm trying include js ans css with different ways, for example:

{% stylesheets '%kernel.root_dir%/../vendor/twbs/bootstrap/less/bootstrap.less' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

or

{% stylesheets '@bootstrap_css' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

but it still not working and I'm getting 404 errors for bootstrap.css and bootstrap.js.

Whats wrong with my config? I'm using wamp server on windows 7 64bit.

The only way to get it working was to use cli command assetic:dump but I think it's not correct way to do this on dev environment.

Answer 1

Finally I've used simply js and css files from bootstrap, without any bundle in symfony because it's faster, easier and may have some advantages such as any update of bootstrap will not crash my site (see update bootstrap 2 to 3...).

So thanks to all for your answers but this is for me best solution.

Answer 2

Try adding this to your config_dev.yml:

assetic:
    use_controller: true

Answer 3

So here is the final answer to your issue:

You have to run it manual because of performance impact. Otherwise if you use to much filters it takes to long to load the app and that can be really frustrating.

In older versions of symfony it seems it was done automatic but have now removed.

See documentation: http://symfony.com/doc/current/cookbook/assetic/asset_management.html#dumping-asset-files-in-the-dev-environment

So everything is ok with your code and configuration.