Overriding Webpack, JS, SCSS for ZED on the project level

Edit on GitHub

To override or expand core JS, SCSS, you need to expand the oryx-for-zed building system with an additional config:

  • To adjust the Webpack config and create aliases for core modules, see Webpack.
  • To create a new entry point and file naming and extend core JS files and path for entry points, see JS.
  • To create a new file with styles and build it with Webpack, see SCSS.
  • To add output JS and CSS on a page, see TWIG.


The minimum required versions:

  • @spryker/oryx-for-zed: 2.13.0
  • webpack: 5.*
  • webpack-merge: 5.*

Create a new javascript file in ./frontend/zed/build.js. Copy the code below to the file:

const { mergeWithCustomize, customizeObject } = require('webpack-merge');
const oryxForZed = require('@spryker/oryx-for-zed');
const path = require('path');

const mergeWithStrategy = mergeWithCustomize({
    customizeObject: customizeObject({
        plugins: 'prepend'

const myCustomZedSettings = mergeWithStrategy(oryxForZed.settings, {
    entry: {
        dirs: [path.resolve('./src/Pyz/Zed/')] // Path for entry points on project level

    .then(configuration => oryxForZed.build(configuration, oryxForZed.copyAssets))
    .catch(error => console.error('An error occurred while creating configuration', error));

The oryx-for-zed building settings must be expanded with a path to ZED modules on the project level (entry.dirs). Due to mergeWithStrategy, the default config with core paths is expanded with a path to the project level.

Use mergeWithCustomize from Webpack (see the preceding example) instead of Object.assign(…). If you use Object.assign(…), the entry points config gets fully overwritten.

If new packages have been installed for modules through npm, specify the path to the resolveModules option on the project level.


const myCustomZedSettings = mergeWithStrategy(oryxForZed.settings, {
    resolveModules: {
        dirs: [path.resolve('./src/Pyz/Zed/')]

After creating the new build for ZED, specify the new commands in root package.json.


    scripts: {
        "zed":"node ./frontend/zed/build",
        "zed:watch":"node ./frontend/zed/build --dev",
        "zed:production":"node ./frontend/zed/build --prod"


To extend the core JS, there must be Webpack aliases for the core modules. To make the new aliases available, extend the Webpack configuration with the new aliases:

oryxForZed.getConfiguration(myCustomZedSettings).then(configuration => oryxForZed.build(mergeWithStrategy(configuration, {
    resolve: {
        alias: {
            {%AliasName%}: 'path/to/module/assets' // Example: 'Gui/assets/Zed/js/**'

You can check the existing list of aliases in the webpack.config.js file of oryx-for-zed.


The newly created entry points for JS files should have the suffix .entry — for example, my-module.entry.js. Webpack collects all entry points with this suffix.

Use the following path to add all new entry points for your project: ./src/Pyz/Zed/{%ModuleName%}/assets/Zed/js/*.entry.js.

To extend JS modules from the core level, use aliases.

To add a JS module, follow the example:

// OR
var ModuleName = require('{%AliasName%}/path/to/file.js');


Use the following path to add all files with style: ./src/Pyz/Zed/{%ModuleName%}/assets/Zed/sass/*.scss. Webpack collects only styles provided in the entry point (JS).

Add style files by following the example:

require('path/to/file.scss') // Example: '../sass/*.scss'

The generated CSS file has the same naming as the JS entry point. For example, if a JS entry point’s name is spryker-gui.entry.js, the CSS output is spryker-gui.css.


Webpack generates each entry point as a separate JS file. If the JS file is not added to the TWIG JS, it won’t work. Keep in mind, that the file generated by Webpack JS doesn’t have an .entry suffix. For example, instead of module-name.entry.js, the name is module-name.js:

<script src="{{ assetsPath('js/*.js') }}"></script>

The newly generated styles have to be added to the twig template too. Note that Webpack automatically renames the output CSS files with the JS entry point name:

<link rel="stylesheet" href="{{ assetsPath('css/*.css') }}">