Typo3 Fluid template cannot find css files using uri.resource

Question

I followed this tutorial to create a Typo3 website using a Fluid template. However, I cannot get the CSS included in the template. In the tag the following css is included:

<link rel="stylesheet" href="css/bootstrap.css">

I rewrote this in the template to:

<link rel="stylesheet" href="{f:uri.resource(path:'css/bootstrap.css')}">

But the css is not included. The path to the template is:

fileadmin/templates/layouts/main.html

The path to the CSS file is:

fileadmin/templates/css/bootstrap.css

Where should I put the CSS files? And how should I include this css in the Fluid template?

Answer 1

Please keep in mind that pduerseler's way of doing it is better if you're using a plugin on many pages.

As for your problem, the uri.resource ViewHelper assumes that your resources are in the Resources/Public directory of your extension. So:

<link rel="stylesheet" href="{f:uri.resource(path:'css/bootstrap.css')}">

points to

typo3conf/ext/yourExt/Resources/Public/css/bootstrap.css

It is not possible to point to a file in fileadmin with the resource ViewHelper, see https://git.typo3.org/Packages/TYPO3.CMS.git/blob/HEAD:/typo3/sysext/fluid/Classes/ViewHelpers/Uri/ResourceViewHelper.php.

Current best practise for a TYPO3 page template is to have the template of a TYPO3 Website in an own extension, see e.g. https://github.com/georgringer/modernpackage

Answer 2

As a rule of thumb, you put JS and CSS files into your typoscript.

Example:

page = PAGE
page {
  includeCSS {
    myfile = path/to/my/file.css
  }

  includeJS {
    myfile = path/to/my/file.js
  }
}

This brings some benefits; You can organize your js and css in multiple files, and have TYPO3 concatenate and compress them by setting

config {
  concatenateJs = 1
  concatenateCss = 1

  compressJs = 1
  compressCss = 1
}

See more here: http://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html