5. Shortcuts (name aliases)

Volto provides the following available names for JavaScript and LESS imports:

5.1. @root / @package

Volto has in place shortcuts to refer to special places in code. This helps in the build when working on a Volto project (when Volto is used as a library) or in a pure Volto core build.

Both @root and @package points to the current top level of either our Volto project or in pure Volto core.

Deprecated since version Volto: 17.0.0

Since @package naming is confusing, specially in an add-on environment, it will be deprecated from Volto 17.0.0 on, in favor of @root. In the meanwhile, both shortcuts are enabled.

5.1.1. Customizing @root imports.

There's a few places in Volto that use @root imports. They reference the "Volto project", but an addon can still customize those (in the scenario where you don't want to touch the Volto project generated scaffolding), by creating a file such as src/customizations/@root/theme.js. This way, for example, an addon could implement its own custom semantic.less file:

import '@eeacms/volto-eea-design-system/semantic.less';
import '@plone/volto/../theme/themes/pastanaga/extras/extras.less';

5.2. volto-themes

The volto-themes name always points to the current Volto Semanticu-UI themes folder, so it can resolve to either node_modules/@plone/volto/theme/themes or ../theme/themes, etc, depending on how Volto is run.

5.3. volto-original

This name allows access to the original, unshadowed modules. When shadowing one of Volto's modules, you can access the original file and use it in the override.