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

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.

Webpack

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
    }
});

oryxForZed.getConfiguration(myCustomZedSettings)
    .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). Because of mergeWithStrategy, the default config with core paths is expanded with a path to the project level.

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

Example:

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.

Example:

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

Aliases

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/**'
        }
    }
})));

JS

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:

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

SCSS

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'

TWIG

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') }}">