
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_css,
@bootstrap_js,
@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:
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
- {@InheritDoc} plugin for PhpStorm
- How to implement a rollback feature
- Bug in behat 3.4.0 - No specifications found at path(s), This might be because of incorrect paths configuration in your `suites`.
- MultiUpload of files in Symfony 3.2
- Executing command line script for different environment (database)
- Validators in Symfony
- String encoding in php
- Command bus in Symfony
- Providing explicit UID (if the user is the same on client and host) at docker run will help with file permissions
- Check if there are the same values for given column