Assets ViewHelpers in TYPO3 v10

Starting with TYPO3 version 10, you can now directly include assets such as JavaScript and CSS files within your Fluid templates. This approach simplifies asset management and enhances template organization. Here is a sample code demonstrating how to achieve this:

<f:asset.css identifier="mySampleExtension" href="EXT:my_sample_ext/Resources/Public/Css/custom.css" />

<f:asset.script identifier="mySampleExtension" src="EXT:my_sample_ext/Resources/Public/JavaScript/custom.js" />

In a similar way you can add inline JavaScript or CSS which will be collected in a run-time by asset manager and merged into external JS or CSS files.

<f:asset.script identifier="mySampleExtension">
   console.log('Sample inline JS');
</f:asset.script>

<f:asset.css identifier="mySampleExtension">
   .body { background: blue; color: white; }
</f:asset.css>

More details you can find in the TYPO3 documentation.