Assetic bundle with Bootstrap 4

in assetic •  7 years ago 

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_css, @bootstrap_js, @jquery)

{% block javascripts %}
    {% javascripts '@jquery' '@bootstrap_js' %}
    <script src="https://npmcdn.com/[email protected]/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.)

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!