Skip to content

v2.5.0.3

Latest

Choose a tag to compare

@se7enxweb se7enxweb released this 22 Apr 03:31

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-nw nexus 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 = false prevents 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 app

Explains 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   # prod

Output is written to web/assets/app/ (gitignored).


Full Changelog: v2.5.0.2...v2.5.0.3