Access less variables in Classic Theme Child

This is more a general question. How can I access less variables like @secondary-colour which are defined in the Parent Theme, when creating a Child Theme?

I have this in my inc.php file:

	public function init() {
		$this->addStyle('custom-stylesheet', 'less/custom.less');
		$this->addScript('custom', 'js/custom.js');

but when I define the @secondary-colour in the custom.less file I have a server error:

PHP Fatal error:  Uncaught Less_Exception_Compiler: variable @secondary-color is undefined in file

So the less variables are not imported in the child theme, I have made some attempts but I couldn’t find a solution.
Especially the Classic Theme is hard, because has a lot of “nested” less files.

Hi @Lara_M,

Take a look at “Adding and Modifying Styles” in the documentation:

Hi, unfortunately with

$this->modifyStyle('stylesheet', array('addLess' => array('less/custom.less')));

none of the styles get loaded, not even the simple css

Hi @Lara_M,

Just tested and it worked for me.
I downloaded the example child theme: GitHub - NateWr/defaultChild: An example child theme for OJS 3., changed the line to inherit the Classic theme: defaultChild/ at master · NateWr/defaultChild · GitHub and modified the content of remove-borders.less to include @secondary-colour. After that, I cleared the template cache and it worked.

1 Like