How to add CSS to a TYPO9.5 Extension?

Question

What is the correct way of adding CSS to the public folder of an extension? What do I need to do in order for that CSS to be loaded in.

For example I have the following structure:

Public/Css/style.css
Configuration/TypoScript/setup.typoscript
Configuration/TypoScript/constants.typoscript

Would I have to add some code in setup.typoscript?

Answer 1

Since TYPO3 8.7 you can add HTML to the header or footer from your Fluid template using the HeaderAssets and FooterAssets sections. For example:

<f:section name="HeaderAssets">
    <link rel="stylesheet" href="{f:uri.resource(path: 'Css/styles.css')}"/>
</f:section>

The advantage of this over page.includeCSS is that it is only included whenever that template is rendered, instead of on all pages.

Answer 2

Your CSS has to be in: extensionkey/Resources/Public/Css/

And then in your typoscript (setup) you can add:

page.includeCSS.csskey = EXT:extensionkey/Resources/Public/Css/style.css

The "csskey" has to be unique identifier.