---
title: "Connect the build to TYPO3"
manual: "StyleX Connector"
version: "1.1"
permalink: "https://docs.typo3.org/permalink/skom/stylex-connector:connect-typo3@1.1"
source: "Installation/Connect.rst"
rendered: "2026-11-01T18:26:19+00:00"
---

# Connect the build to TYPO3 {#connect-typo3}

Add the connector Site Set to the site's active Site Set dependencies. Keep
the dependencies the sitepackage already needs:

**packages/my_sitepackage/Configuration/Sets/Sitepackage/config.yaml**

```yaml
name: vendor/my-sitepackage
dependencies:
  - skom/stylex-connector
```

For TYPO3 12 or a site without Site Sets, import the connector's supplied
TypoScript setup and constants in the sitepackage instead:

```typoscript
@import 'EXT:stylex_connector/Configuration/TypoScript/setup.typoscript'
@import 'EXT:stylex_connector/Configuration/TypoScript/constants.typoscript'
```

Neither Site Sets nor TypoScript generate the StyleX manifest. Register the
exact output path configured in [Vite and asset delivery](https://docs.typo3.org/permalink/skom/stylex-connector:vite-and-asset-delivery@1.1) from the sitepackage:

**packages/my_sitepackage/ext_localconf.php**

```php
<?php

declare(strict_types=1);

defined('TYPO3') or die();

\Vendor\StylexConnector\Configuration\StylexRegistry::registerManifest(
    'my_sitepackage',
    'EXT:my_sitepackage/Resources/Public/StylexManifest/stylex-manifest.json'
);
```

`Skom\\StylexConnector` is an alias for the same public classes. The
extension registers the `stylex` Fluid namespace globally, so a separate
namespace registration file is unnecessary.

## Render the Vite entrypoint {#render-the-vite-entrypoint}

Add one asset collector call to the page layout TYPO3 actually renders. The
entry path must be the same as in `ViteEntrypoints.json`:

**packages/my_sitepackage/Resources/Private/PageView/Layouts/PageLayout.html**

```html
<html
    data-namespace-typo3-fluid="true"
    xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
    xmlns:vite="http://typo3.org/ns/Praetorius/ViteAssetCollector/ViewHelpers"
>
    <vite:asset entry="EXT:my_sitepackage/Resources/Private/JavaScript/Main.entry.js" />
    <f:render section="Main" />
</html>
```

Keep the site's existing layout structure. Remove any older inclusion of the
same built CSS or JavaScript so each asset loads once. The asset collector
uses the Vite development server when available and the built manifest in
production.

With this delivery path, leave
`StylexConnector.includeCssViaTypoScript` disabled. If another asset system
already serves the build, keep that system and register the StyleX manifest
the same way. See [CSS delivery settings](https://docs.typo3.org/permalink/skom/stylex-connector:css-delivery-settings@1.1) for the optional prebuilt CSS
include and the full settings reference.

## Use a manifest key {#use-a-manifest-key}

Once Vite has written the manifest, a Fluid template can resolve its keys:

```html
<button class="{stylex:class(styles: 'Button.root')}">Save</button>
```

The ViewHelper writes classes; the page's asset include supplies their CSS.
Continue with [Verify development and production delivery](https://docs.typo3.org/permalink/skom/stylex-connector:verify-installation@1.1), then see [Using the ViewHelper](https://docs.typo3.org/permalink/skom/stylex-connector:using-the-viewhelper@1.1) for
conditional styles and key composition.