symfonydev avatar

Assetic bundle with Bootstrap 4

symfonydev

Published: 25 Sept 2017 › Updated: 25 Sept 2017Assetic bundle with Bootstrap 4

Assetic bundle with Bootstrap 4

Basic config for assetic bundle:
https://coderwall.com/p/cx1ztw/bootstrap-3-in-symfony-2-with-composer-and-no-extra-bundles

Installing assets in Symfony
https://symfony.com/blog/new-in-symfony-2-6-smarter-assets-install-command

Asset management in Symfony (merging /concatenating resources):
http://symfony.com/doc/current/assetic/asset_management.html

assetic:
    debug:          "%kernel.debug%"
    use_controller: false
    bundles:        [ 'AppBundle' ]

    filters:
        # Since Assetic generates new URLs for your assets, any relative paths inside your CSS files will break.
        # To fix this, make sure to use the cssrewrite filter with your stylesheets tag. This parses your CSS
        # files and corrects the paths internally to reflect the new location.
        # !!! IMPORTANT When using the cssrewrite filter, don't refer to your CSS files using the @AppBundle syntax.
        cssrewrite: ~
    assets:
        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'
            filters: [cssrewrite]

        jquery:
            inputs:
                - '%kernel.root_dir%/../vendor/twbs/bootstrap/vendor/components/jquery/jquery.js'

with config like that (note keys: bootstrap_css, bootstrap_js, jquery) above you can refer to the assets with @ (bootstrap@bootstrap_css, bootstrap@bootstrap_js, jquery@jquery)

{% block javascripts %}
    {% javascripts '@jquery' '@bootstrap_js' %}
    <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
    <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

and

{% block stylesheets %}
    {% stylesheets "@bootstrap_css" %}
        <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}"/>
    {% endstylesheets %}

    {% stylesheets 'bundles/app/css/*' output='css/compiled/main.css' %}
        <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}"/>
    {% endstylesheets %}
{% endblock %}

and place it in base.html.twig for example

Bootstrap 4 examples:
https://v4-alpha.getbootstrap.com/examples/

CSSREWRITE:
When using the cssrewrite filter, don't refer to your CSS files using the @AppBundle syntax because it will crash linking inside css files (backgound images etc.)

Leave Assetic bundle with Bootstrap 4 to:

Written by

Read more #assetic posts


Best Posts From symfonydev

We have not curated any of symfonydev's posts yet. But you can encourage our curation team to review posts by visiting them regularly and by referring other readers. Because we give priority to frequently read content.

More Posts From symfonydev