2

I am working on a Joomla! 5 compatible theme and want to use the WebAssetManager function in combination with joomla.asset.json to register and include theme assets. I am bumping into an issue where the following happens:

This is my joomla.asset.json file:

{ "$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json", "name": "base", "version": "5.0.0", "description": "This file contains details of the assets used by this Joomla 5 site template.", "license": "GPL-2.0-or-later", "assets": [ { "name": "template.base.style", "description": "Template CSS", "type": "style", "uri": "media/templates/site/base/template.css" } ] } 

Note: the file in the declared uri exists

In my index.php I call the getWebAssetManager function:

/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */ $assetManager = $this->getWebAssetManager(); 

After that I call the useStyle function to use the stylesheet like this:

$assetManager->useStyle('template.base.style'); 

And of course in the head of the page I jdoc include the stylesheets, like this:

<jdoc:include type="styles" /> 

The result is that stylesheets used by extensions are loaded in the frontend, but template.css doesn't.

Then I changed the code in index.php to register and include the stylesheet this way. So I don't use the joomla.asset.json but directly register the file:

$assetManager->registerAndUseStyle( 'template.base.style', 'media/templates/site/base/css/template.css', [], [], [] ); 

The result: it works! The file is loaded in the frontend the way it is supposed to be.

Can somebody explain to me why my first approach is not working? Am I overlooking something or is this a known bug in J5 which I didn't notice in de issue tracker?

2 Answers 2

1

Based on your working PHP code, the actual path to the file is this:

media/templates/site/base/css/template.css 

But in JSON you wrote this:

media/templates/site/base/template.css 

Correct it and it should work. Furthermore, you can simplify it to just template.css, template media path should be prepended automatically. Default Cassiopeia template has this, for example:

{ "name": "template.cassiopeia.ltr", "description": "The css file to be used when the site is left to right (LTR).", "type": "style", "uri": "template.min.css", "dependencies": [ "fontawesome" ] } 

Which loads media/templates/site/cassiopeia/css/template.min.css.

0

Try to zip & "install" the template the usual way, the asset.json file gets not reconized when added / pasted / moved in manually after installation of the extension. At least its the case for components where i had a similar issue. After you have done it once you are able to make changes to the asset.json which gets loaded - its just the first time you have to do a "re-"install

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.