Themes

The project introduces the concept of "themes".
Theme - is a collection of components, which implements a presentation layer that is unique to your application. It should not contain any business logic. It should simply adopt extensions functionality to intended design of your application.
For application to be considered a theme, it must have a package.json field scandipwa.type equal to theme. For example:
1
{
2
    "scandipwa": {
3
        "type": "theme"
4
    }
5
    ...
6
}
Copied!
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.
If you are selecting a new parent theme, it is not enough to just set the value of scandipwa.parentThemein package.json. The parent theme package should be listed among of your package dependencies.
The properly installed parent theme package.json could look like this:
1
{
2
    "dependencies": {
3
        "@scandipwa/scandipwa": "1.0.1",
4
        ...
5
    },
6
    "scandipwa": {
7
        "type": "theme",
8
        "parentTheme": "@scandipwa/scandipwa",
9
        ...
10
    },
11
    ...
12
}
Copied!
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:
1
import { AddToCart } from 'SourceComponent/AddToCart/AddToCart.component';
Copied!
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:
Folder alias
Path from theme root
Purpose
Style
./src/style
Global styles
Component
./src/component
React component definitions
Route
./src/route
Router pages definitions
Util
./src/util
Utility functions
Query
./src/query
GraphQL query definitions
Type
./src/type
React prop-type definitions
Store
./src/store
Redux store definitions
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:
1
{
2
    "scandipwa": {
3
        "type": "theme",
4
        "themeAlias": "Source",
5
        ...
6
    }
7
    ...
8
}
Copied!
Setting the Webpack alias for a theme which is not used as a parent is not required. This field only comes into play, when a theme is selected as a parent theme for another one.
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:
1
import { AddToCart } from '@scandipwa/scandipwa/src/component/AddToCart/AddToCart.component'; 
Copied!
Both of these approaches are valid, but for consistency, we recommend using Webpack aliases.

Getting Started - Previous

Updating to New Releases

Next - Themes

File overrides

Last modified 1yr ago

Copy link

Contents

Parent theme

Theme Webpack alias