TYPO3 8自定义扩展：仅用TypoScript按需加载插件样式表

Problem Description #

I'm using TYPO3 8 with a custom extension that has three frontend plugins, each with its own stylesheet. Right now, all three stylesheets load on every page, even if only one (or none) of the plugins are rendered. Here's my current setup.ts code:

page.includeCSS.tx_myextension_frontendpluginONE = EXT:myextension/Resources/Public/Css/frontendpluginONE.css
page.includeCSS.tx_myextension_frontendpluginTWO = EXT:myextension/Resources/Public/Css/frontendpluginTWO.css
page.includeCSS.tx_myextension_frontendpluginTHREE = EXT:myextension/Resources/Public/Css/frontendpluginTHREE.css

I'm wondering if it's possible to use only TypoScript to load each stylesheet only when its corresponding plugin is displayed on the page. I suspect this can be configured within the extension's plugin settings (like plugin.tx_myextension_frontendpluginONE.settings), and I'd appreciate a solution.

Solution #

Absolutely, you can pull this off with pure TypoScript—no extra PHP or extensions needed. The trick is to move your CSS inclusion from the global page.includeCSS section into each plugin's own TypoScript configuration block. Here's how to do it step by step:

1. First, delete the global CSS lines you shared from your main setup.ts—we won't need those anymore.
2. For each plugin, add the CSS inclusion directly inside its plugin-specific TypoScript block. This ensures the stylesheet only gets loaded when the plugin is actually rendered on the page.

Example for Plugin ONE: #

plugin.tx_myextension_frontendpluginONE {
    # Keep your existing plugin settings (like persistence, view configurations) here
    page.includeCSS.tx_myextension_frontendpluginONE = EXT:myextension/Resources/Public/Css/frontendpluginONE.css
}

Repeat for the Other Two Plugins: #

plugin.tx_myextension_frontendpluginTWO {
    page.includeCSS.tx_myextension_frontendpluginTWO = EXT:myextension/Resources/Public/Css/frontendpluginTWO.css
}

plugin.tx_myextension_frontendpluginTHREE {
    page.includeCSS.tx_myextension_frontendpluginTHREE = EXT:myextension/Resources/Public/Css/frontendpluginTHREE.css
}

How This Works #

In TYPO3, when a plugin is inserted into a page, its entire TypoScript configuration (under plugin.tx_...) gets merged into the global page configuration. That means the page.includeCSS entry for the plugin will only be added to the page if the plugin is present and actively rendered—exactly what you want.

Alternative (Less Clean) Method: Conditional Checks #

If you'd rather keep CSS in the global page.includeCSS section, you could use a user function to check if the plugin exists on the page. But this requires writing a small PHP utility class, which goes against your "only TypoScript" request. For reference, it would look something like this:

[userFunc = Vendor\MyExtension\Utility\PluginUtility::isPluginPresent('tx_myextension_frontendpluginONE')]
    page.includeCSS.tx_myextension_frontendpluginONE = EXT:myextension/Resources/Public/Css/frontendpluginONE.css
[global]

Stick with the first method—it's simpler and fully TypoScript-based.

Quick Notes #

• Double-check that your extension's TypoScript is properly included in your site template (either via static include or direct import).
• This approach works flawlessly in TYPO3 8 and all later versions.

内容的提问来源于stack exchange，提问作者Tom