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:{
"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.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:{
"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.
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: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:{
"scandipwa": {
"type": "theme",
"themeAlias": "Source",
...
}
...
}
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:
import { AddToCart } from '@scandipwa/scandipwa/src/component/AddToCart/AddToCart.component';
Both of these approaches are valid, but for consistency, we recommend using Webpack aliases.
Last modified 2yr ago