Add SCSS variables
The configuration flag
css is available from Shopware Version 6.4.12.0Overview
In order to add SCSS variables to your plugin, you can configure fields in your
config.xml to be exposed as scss variables.We recommend to use the declaration of SCSS variables via the
config.xml but you can still use a subscriber if you need to be more flexible as described here.Prerequisites
You won't learn how to create a plugin in this guide, head over to our Plugin base guide to create your first plugin:
Setup a default value for a custom SCSS variable
Before you start adding your config fields as SCSS variables, you should provide a fallback value for your custom SCSS variable in your plugin
base.scss:<plugin root>/src/Resources/app/storefront/src/scss/base.scss
1
// The value will be overwritten when the plugin is installed and activated
2
$sass-plugin-header-bg-color: #ffcc00 !default;
3
​
4
.header-main {
5
background-color: $sass-plugin-header-bg-color;
6
}
Copied!
Plugin config values as SCSS variables
Now you can declare a config field in your plugin
config.xml to be available as scss variable. The new tag is <css> and takes the name of the scss variable as its value.1
<input-field>
2
<name>sassPluginHeaderBgColor</name>
3
<label>Header backgroundcolor</label>
4
<label lang="de-DE">Kopfzeile Hintergrundfarbe</label>
5
<css>sass-plugin-header-bg-color</css>
6
<defaultValue>#eee</defaultValue>
7
</input-field>
Copied!
This value will now be exposed as SCSS variable and will have the value set in the administration or the default value if not set. When this value is changed you still have to recompile the theme manually for the changes to take effect. Plugin configurations with declared SCSS variable in its config.xml have a notice in the administration that changes can change the theme
Last modified 18d ago
Copy link
Edit on GitHub