F3 changes relative URi of css files
I am a newbie experimenting with F3. My sample app mostly works, but css file references change and not being detected. It looks like a .htaccess problem, but I can't seem to fix it.
My css files are listed as
<link rel="stylesheet" href="ui/css/base.css" type="text/css" />
<link rel="stylesheet" href="ui/css/theme.css" type="text/css" />
<link rel="stylesheet" href="lib/code.css" type="text/css" />
My .htaccess file looks like
RewriteBase /blog/
RewriteCond %{REQUEST_URI} \.ini$
RewriteRule \.ini$ - [R=404]
RewriteCond %{REQUEST_FILENAME} !-l
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule .* index.php [L,QSA]
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization},L]
It is in / blog under the root doc and / ui and / lib are directories in / blog
Somehow the css files get link as / blog / view / ui / css when accessing the route template ('view' is the route name) I don't understand why this link changed. You can help?
source to share
This is because you are referencing your CSS files relatively. Or you add "/" as shown below.
<link rel="stylesheet" href="/lib/code.css" type="text/css" />
or you use the internal F3 variable to define the base path, which might be better if your application is inside a subdirectory. So you should write the following in your template (at least if you are using Template class)
<link rel="stylesheet" href="{{@BASE}}/lib/code.css" type="text/css" />
source to share