Frontend Developer Manual / 5.5 Theme Inheritance

Frontend Developer Manual / Version 2307

5.5 Theme Inheritance

When creating a new theme, you can choose to start from scratch or derive from another theme and make use of all resources and files, located in the parent theme. Your new child theme may then extend the parent theme by adding more dependencies, templates, styles etc. However, there are certain limitations and requirements: You can only derive from one theme and this parent has to have the correct configuration and file structure. Have a look at the prerequisites to learn about the requirements to parent themes.

Prerequisites

To be able to inherit from another theme, you will have to make sure this theme meets certain prerequisites:

The SCSS files of the parent theme should be created like shown in Example 4.3, “ Filesystem structure of a theme ”. The theme needs a src/sass/_partials.scss and src/sass/_variables.scss file, as well as the src/sass/themename.scss file. While the latter file is simply importing the other ones,
```
@import "variables";
@import "partials";
```
the _partials.scss will import all local partial SCSS files in the parent theme,
```
@import "excludes";

// Dependency styles
@import "?smart-import-partials";

// Own partials
@import "partials/example";
...
```
and src/sass/_variables.scss will do the same for local variable files:
```
@import "variables/example";
...

// Dependency variables
@import "?smart-import-variables";
```
Please note, that the order of the imports is important and should not be changed.
You will also have to make sure, that an init entry exists in the parent theme package.json. This entry should link to the JavaScript entry point of the theme:
```
"coremedia": {
    ...
    "init": "src/js/<name>.js"
  },
```

How to extend the parent theme

If you choose not to use the theme creator, you will have to enable the inheritance by adding the parent theme to the list of dependencies in your package.json like shown in the example below:

cd themes/<name>
pnpm add @coremedia/<parent-name>@^1.0.0

You also need to adjust your webpack.config.js to set the webpackConfig correctly:

const webpackConfig = require("@coremedia/<parent-name>/webpack.config.js");

No matter if you chose to use the theme creator or add the dependency to the parent theme manually, you will have to adjust the preview.scss in your child theme in order to make the studio preview work correctly. CoreMedia recommends copying the preview.scss from the parent theme into the child theme and change the paths to the imported files accordingly like shown in the example below:

// Dependency variables
@import "~@coremedia/<parent-theme>/src/sass/variables/bootstrap_variables";
@import "~@coremedia/<parent-theme>/src/sass/variables/variables";

// Dependency variables
@import "?smart-import-variables";

// ### PARTIALS ###
@import "~@coremedia/<parent-theme>/src/sass/excludes";

// Dependency partials
@import "?smart-import-partials";

// Theme partials
@import "~@coremedia/<parent-theme>/src/sass/partials/preview";

Search Results

Table Of Contents

Filter

Frontend Developer Manual / Version 2307

5.5 Theme Inheritance

Prerequisites

How to extend the parent theme

Search Results