What's Changed
New Features
feat: project app SCSS / Webpack Encore named build
Adds a dedicated app Webpack Encore named config that compiles the
site-level SCSS entry point (assets/scss/index.scss) into versioned CSS
output under web/assets/app/. The compiled stylesheet is referenced from
templates via the Symfony WebpackEncoreBundle Twig helper, replacing the
previous hardcoded hashed URL.
assets/scss/index.scss — new SCSS entry point (~9 700 lines) converted
from the v3 production CSS:
- Imports Bootstrap 5 via
bootstrap/scss/bootstrap - Imports Swiper (
swiper/swiper-bundle.css) for carousel/slider support - Imports PhotoSwipe (
photoswipe/dist/photoswipe.css) for lightbox support - Contains all site-level styles: header, language selector, sushi-bar nav,
standard / overlay / list / mini / line item view types, search results,
card / zigzag / accordion / slide item layouts, video / gallery / contact
full views,#sxa-nwnexus widget styles, and responsive breakpoints
webpack.config.js — new app named Encore config appended alongside the
existing ezplatform Admin UI config:
Encore.reset();
Encore
.setOutputPath('web/assets/app')
.setPublicPath('/assets/app')
.enableSassLoader()
.enableReactPreset()
.enableSingleRuntimeChunk()
.enableVersioning()
.configureCssLoader(config => { config.url = false; })
.addStyleEntry('index', './assets/scss/index.scss');
const projectConfig = Encore.getWebpackConfig();
projectConfig.name = 'app';
module.exports = [ eZConfig, ...customConfigs, projectConfig ];
config.url = falseprevents the css-loader from trying to resolve
hashed asset URLs embedded in third-party CSS at build time.
package.json — three new npm dependencies:
| Package | Version |
|---|---|
bootstrap |
^5.3.8 |
swiper |
^12.1.3 |
photoswipe |
^5.4.4 |
app/config/config.yml — registers the app named build in both
webpack_encore.builds and assets.packages so that
encore_entry_link_tags() resolves the versioned manifest correctly:
webpack_encore:
builds:
ezplatform: "%kernel.project_dir%/web/assets/ezplatform/build"
app: "%kernel.project_dir%/web/assets/app"
assets:
packages:
app:
json_manifest_path: '%kernel.project_dir%/web/assets/app/manifest.json'app/Resources/views/themes/standard/parts/page_head.html.twig —
replaces the previous hardcoded hashed CSS <link> with the Encore helper:
{# before #}
<link rel="stylesheet" type="text/css" href="/assets/app/build_dev/index.810a7f89.css">
{# after #}
{{ encore_entry_link_tags('index', null, 'app') }}Assets
assets: add exponentialplatform brand image
Added web/assets/images/exponentialplatform.png (46.8 KB) — the
Exponential Platform brand / logo image, sourced from the v3 production site.
Documentation
docs: document the project app named Encore config in INSTALL.md
Updated doc/INSTALL.md section 8 (Frontend Asset Build) with a new
sub-section explaining how to build the project app CSS separately from the
Admin UI Encore build:
# Development:
node_modules/.bin/encore dev --config-name app
# Production:
node_modules/.bin/encore production --config-name appExplains the encore_entry_link_tags('index', null, 'app') Twig helper and
notes that Bootstrap 5, Swiper, and PhotoSwipe must be installed via
yarn install / npm install before building.
Build Instructions
To compile the project app CSS after installing:
nvm use 14 # Node 14 LTS required (webpack 4 / Encore 1.8.2)
yarn install # installs bootstrap, swiper, photoswipe
node_modules/.bin/encore dev --config-name app # dev
node_modules/.bin/encore production --config-name app # prodOutput is written to web/assets/app/ (gitignored).
Full Changelog: v2.5.0.2...v2.5.0.3