The project introduces the concept of "themes".

For application to be considered a theme, it must have a package.json field scandipwa.type equal to theme. For example:

{
    "scandipwa": {
        "type": "theme"
    }
    ...
}

The theme is what you compile into running website, therefore it also contains start and build scripts. You can read more about them in the "Getting started" section.

Parent theme

Themes can stack on top of each another. A theme which another theme is based on is called a parent theme. To specify a parent theme, set the package.json field scandipwa.parentTheme equal to intended parent theme package name.

The properly installed parent theme package.json could look like this:

{
    "dependencies": {
        "@scandipwa/scandipwa": "1.0.1",
        ...
    },
    "scandipwa": {
        "type": "theme",
        "parentTheme": "@scandipwa/scandipwa",
        ...
    },
    ...
}

A theme can override files of a parent theme. Learn more about overriding a parent theme in the File overrides guide.

Theme Webpack alias

In previous versions of ScandiPWA, the import from parent theme looked the following way:

import { AddToCart } from 'SourceComponent/AddToCart/AddToCart.component';

You may have noticed the SourceComponent alias appearing in the begging of the import. This allows to define shorter import paths. This alias is composed from a folder inside of the src and the prefix of the theme. The @scandipwa/scandipwa theme has a prefix Source . The src folders which support this mapping are:

To define a Webpack alias for your theme, you are required to define the scandipwa.themeAlias field in package.json. The value you define in this field will be used as your theme prefix. You can do it like this:

{
    "scandipwa": {
        "type": "theme",
        "themeAlias": "Source",
        ...
    }
    ...
}

There is however, another way to import files from a parent theme. You can always import the file from the NPM package of your parent theme directly. Like so:

import { AddToCart } from '@scandipwa/scandipwa/src/component/AddToCart/AddToCart.component'; 

Both of these approaches are valid, but for consistency, we recommend using Webpack aliases.