Beside some overrides in theme/elements/container.variables and .../container.overrides and /theme/globals/site.variables and .../site.overrides I have components and listing block templates that should get some styling.
Styling with additional theme/customtheme/customtheme.less and
works well, styling is applied.
As soon as I use global variables like @mobileGutter the compilation fails.
./node_modules/@plone/volto/theme/themes/pastanaga/extras/extras.less (./node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/postcss-loader/src??postcss!./node_modules/less-loader/dist/cjs.js??ref--8-3!./node_modules/@plone/volto/theme/themes/pastanaga/extras/extras.less) padding-left: @mobileGutter; Variable @mobileGutter is undefined Error in /Users/ksuess/Volto/Schweikert/schweikertruth/theme/customtheme/customtheme.less (line 53, column 16)
I wonder where to place styling rules that are not related to any default Volto components.
And yes, the upgrade recommendations for moving to /theme/sites to be prepared for add-ons is another topic. I'll come back to it later.
Any best practice tips?