Copy the assets of the theme
Assets usually include CSS files, JavaScript and images / icons used for design purposes.
Within an extension, including a site package, assets can only be placed in folder
Resources/ and subfolders of this folder. This folder will be
symlinked into public/_.
Note
You must never reference any file in public/_ directly by
using the hash in an absolute or relative URL. The hashes can change at any
time. Only use TYPO3 library methods to reference the assets.
Read more about assets in Getting started, assets.
The example theme
For the purpose of demonstration we created a theme based on Bootstrap and some custom CSS / JavaScript.
You can download the files of the example theme from https://github.com/TYPO3-Documentation/site_package/tree/main/Resources/Public
Now copy these files into folder Resources/ of your site package.
The static HTML templates
In folder Resources/ you will now find two HTML
files. We will use these as example to create the
Fluid templates in the next step. Afterwards they can
be deleted or kept for reference.
During local development you can open these directly (using paths from your operating system) in your browser to see what the site should look like after we are finished with the site package.
Note
If you want to work with your own theme or received a theme from a frontend developer make sure that all paths used within the theme are relative.
Managing asset dependencies in real life projects
It is technically possible to use a CDN (Content Delivery Network) to include
libraries in TYPO3. However there are privacy and security risks attached to
this and it might be a GDPR Violation. Therefore we recommend to host all files
yourself by placing them in the Resources/ folder.
In a later step, you can use npm (Node Package Manager) to manage your JavaScript and CSS dependencies locally. We also recommend using a JavaScript bundler like Vite.
If you decide to use a frontend bundler, make sure that the resulting asset
files are placed in a publicly available folder, like Resources/
in your site package.
There are also TYPO3 extensions like praetorius/vite-asset-collector to bundle your TYPO3 frontend assets with Vite.