ameotoko / contao-encore-bridge
Installs: 240
Dependents: 0
Suggesters: 0
Security: 0
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Type:contao-bundle
Requires
- php: ^7.4 || ^8.0
- contao/core-bundle: ^4.13 || ^5.0
- symfony/webpack-encore-bundle: ^1.14
Requires (Dev)
- contao/manager-plugin: ^2.0
README
This is an extension for Contao CMS which provides a wrapper for
Webpack Encore bundle's encoreEntryLinkTags()
and
encoreEntryScriptTags()
functions, allowing a developer to use those functions in .html5
templates as well.
Installation
NOTE: Webpack Encore Bundle requires output_path
config to be set.
If you do not yet have Webpack Encore Bundle installed, Contao-Encore Bridge will add it to your application
automatically, so be sure to set output_path
in your config.yml
file before installation:
# config/config.yml webpack_encore: output_path: '%kernel.project_dir%/public/build'
Then install Contao-Encore Bridge:
composer require ameotoko/contao-encore-bridge
Configuration
Configure your Webpack Encore as described in official docs:
Usage
Assuming you have configured your Webpack entrypoint like this:
// webpack.config.js const Encore = require('@symfony/webpack-encore'); Encore .addEntry('app', './frontend/js/app.js') ;
you can now output all stylesheets and scripts for that entry in your .html5
templates, e.g. in fe_page.html5
:
<!DOCTYPE html> <html lang="<?= $this->language ?>"<?php if ($this->isRTL): ?> dir="rtl"<?php endif; ?>> <head> ... <?= $this->encoreEntryLinkTags('app') ?> </head> <body> ... <?= $this->mootools ?> <?= $this->encoreEntryScriptTags('app') ?> </body> </html>
Or add them from any other template like so:
<?php $this->extend('ce_gallery'); ?> <?php $this->block('content'); ?> <?php $this->parent(); ?> <?php $GLOBALS['TL_CSS'][] = $this->encoreEntryLinkTags('app'); ?> <?php $GLOBALS['TL_BODY'][] = $this->encoreEntryScriptTags('app'); ?> <?php $this->endblock(); ?>