.htaccess breaks CSS and Javascript when query-string is passed

Question

I have a problem with my .htaccess file. This is my site structure

/root
   /SubFolder/  # I'm working on this one
      .htaccess
      index.php
      news.php
      /css/
         normalize.css
         main.css
      /js/
         scripts.js
      /admin/
         news.php
         add.php
         edit.php

Everything works fine except when I try to access the following url: edit/2 ( this wold be the same as edit.php?id=2 ) in the admin directory which is in the SubDirectory.

This is my .htaccess file

# ##############################################################################
# # URL REWRITES                                                               #
# ##############################################################################
<IfModule mod_rewrite.c>
    Options +FollowSymlinks
    RewriteEngine On
    RewriteBase /SubFolder
    SetEnv WROOT /var/www/vhosts/website.com/httpdocs/SubFolder/
</IfModule>

# ------------------------------------------------------------------------------
# | Custom error messages / pages                                              |
# ------------------------------------------------------------------------------
ErrorDocument 404 /SubFolder/template/404.php

# ------------------------------------------------------------------------------
# | Removing the "www." at the beginning of URLs                  |
# ------------------------------------------------------------------------------
# Uncomment on live website
#<IfModule mod_rewrite.c>
#   RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
#   RewriteCond %{HTTPS}s ^on(s)|
#   RewriteRule ^ http%2://%1%{REQUEST_URI} [L,R=301]
#</IfModule>


# ------------------------------------------------------------------------------
# | Remove the slash                                                           |
# ------------------------------------------------------------------------------
<IfModule mod_rewrite.c>
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^([^/]+)/$ $1 [R=301,L]
</IfModule>


# ------------------------------------------------------------------------------
# | Redirect to extensionless url                                              |
# ------------------------------------------------------------------------------
<IfModule mod_rewrite.c>
    RewriteCond %{THE_REQUEST} ^(.+)\.php([#?][^\ ]*)?\ HTTP/
    RewriteRule ^(.+)\.php$ $1 [R=301,L]
</IfModule>


# ------------------------------------------------------------------------------
# | Pretty urls                                                                |
# ------------------------------------------------------------------------------

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule .* - [L]
RewriteRule ^edit/([0-9]+)$ edit.php?id=$1 [L]

<IfModule mod_rewrite.c>
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME}\.php -f
    RewriteRule ^(.*)$ $1.php [L]
</IfModule>

When I try to go to edit/2 in the admin directory, my styles, images and scripts paths are all broken. In fact the included path in the chrome console shows http://website.com/SubFolder/admin/css/style.css instead of http://website.com/SubFolder/css/style.css. If i go to a normal page without query-strings, in either the SubDirectory or the SubDirectory/admin/ folder, my styles are loaded correctly.

Just for the record, this is how I include <link> and <script> in the admin directory: <link rel="stylesheet" href="../css/normalize.css">

I tried to change the RewriteBase to just / and /SubFolder/admin but then all of my pages have broken paths.

I also tried to add <base href="/admin/"> but still broken paths.

Any suggestions or help of how can I fix this ?

Thank you in advance.

Answer 1

You can try one the 2 ways to fix this:

1. Use absolute path in your css, js, images files rather than a relative one. Which means you have to make sure path of these files start either with http:// or a slash /. So your css links should be like this for example:

   <link rel="stylesheet" href="/SubFolder/admin/css/style.css">
   

2. If switching to absolute links is not an option then try inserting this rule as your very first rule in your current .htaccess:

   RewriteRule /((?:css|js|images)/.+)$ $1 [L,NC,R=301]
   

Answer 2

You don't want to add <base href="/admin/">, you want to add <base href="/Subfolder/">