Assetic bundle with Bootstrap 4

in #assetic7 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.)

Coin Marketplace

STEEM 0.17
TRX 0.15
JST 0.028
BTC 59988.10
ETH 2415.66
USDT 1.00
SBD 2.45