CSS Not Loading After Redirect with Htaccess Rewrite Rule

JS and CSS Rendering Issues After .htaccess File URL Rewrite Rule

The "problem" is that you appear to be using relative URL-paths to your static resources (CSS, JS and images). So this is a client-side URL resolution issue. You should be using root-relative (starting with a slash) or absolute (with scheme + hostname) URLs to your assets so they can be located regardless of URL-path depth. (Note that any requests that your JS makes, eg. AJAX, should also be root-relative or absolute.)

The problem is not so much with .htaccess, but when you change the URL from /post.php?page=page_slug to /post/page_slug then any client-side relative URLs are going to resolve relative to /post/, not / (the document root) as before.

The request for the JS (and CSS) files result in a 404, so the 404 HTML error document is most probably being parsed as JS and failing (ie. "Uncaught SyntaxError: Unexpected token: '<'" - due to a <!DOCTYPE html> or opening <html> tag).

A possible workaround (to avoid changing your URLs) is to use a base HTML element in the head section to indicate what any relative URLs should be resolved relative to, overriding the URL of the current document. However, this has some additional caveats if you are using in-page anchors of the form href="#element" - since they will now be resolved relative to the document stated in the base element and not the current document.

See also my answer to the following question on the Webmasters stack that goes into more detail on this:

  • https://webmasters.stackexchange.com/questions/86450/htaccess-rewrite-url-leads-to-missing-css

URL rewriting : css, js, and images not loading

Don't be lazy and change your relative URIs in your resources to root directory absolute pathing like /css/style.css. This is the best.

You can get clever and use regex and replace all the files you need which would be like a few one liners and you're done. How many places could there be to change? And you should be using a template.

This should work but I wouldn't go this way.

RewriteRule ^detail/(css|js|img)/(.*)?$ /$1/$2 [L,QSA,R=301]

how to rewrite the htaccess rules to redirect to css files

You can have these rules in your site root .htaccess:

RewriteEngine On

# rewrite css files to their actual path
RewriteRule ^css/(.+\.css)$ resources/styles/$1 [L,NC]

# rewrite js files to their actual path
RewriteRule ^js/(.+\.js)$ resources/js/$1 [L,NC]

# write root to public/
RewriteRule ^$ public/ [L]

RewriteRule ^(?!resources/).* public/$0 [L,NC]

CSS not loading when using .htaccess

You need to add in a rule to exclude rewriting of assets

#Checks to see if the user is attempting to access a valid file,
#such as an image or css document, if this isn't true it sends the
#request to index.php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond $1 !^(index\.php|images|robots\.txt|css)

.htaccess RewriteRule also rewriting my css, js and images files. how to ignore these?

You can use that:

RewriteEngine on
# not rewrite css, js and images
RewriteCond %{REQUEST_URI} !\.(?:css|js|jpe?g|gif|png)$ [NC]
RewriteRule ^abc/(.+)/(.+)/ abc.php?id=$1&name=$2 [L]

# rewrite css, js and images, from root
RewriteRule ^abc/[^/]+/[^/]+/(.+)$ $1 [L]

If your final css (or js) directory is not at root, you can add the path before the last $1. Now it's: /css/style.css with /abc/xxx/yyy/css/style.css

.htaccess rewrite rule breaks css and javascript when non existant sub directory or trailing slash is in url

It appears that you use relative links for including your javascript or css files.
So, all you have to do is make your file addresses absolute, like /js/search.js.
Your rewrite rule is correct and it won't forward the actual files to your index.php file. But when you say src='js/search.js', it means index.php/js/search.js for the browser, and that is not an actual file address.

URL rewrite in htaccess results is missing CSS and images

RewriteRule index.php?url=$1 [QSA, L]

I think you have a couple of glaring typos(?) in your question that make this directive completely invalid... you are missing a RewriteRule pattern, so this won't actually match anything and the erroneous space in the flags argument is syntactically invalid, resulting in a 500 Internal Server Error response?!

The RewriteRule directive should be written like:

RewriteRule ^([\w/-]+)$ index.php?url=$1 [QSA,L]

^([\w/-]+)$ matches a URL-path containing any of the characters: a-z, A-Z, 0-9, _ (underscore), / (slash) and - (hyphen). I've excluded the dot, which is naturally part of real filenames.

You should also ensure that MultiViews is disabled, so that mod_negotiation doesn't rewrite the request before mod_rwrite - since your "extensionless" requests appear to map directly to filenames. eg. /user maps to /user.php. Place the following at the top of your .htaccess file:

Options -MultiViews

But when I was given a slash to my URL it stops showing CSS or other IMG directories.

This isn't a problem with .htaccess, but is caused by using relative client-side URLs to your static resources. When you request the URL /user/anonymous then the browser will resolve any relative URLs relative to /user/anonymous (not the document root - which is probably what you are expecting). If you have a relative URL to css/styles.css then the browser is naturally going to resolve this to /user/css/styles.css - which probably doesn't exist (and is likely getting rewritten to index.php - but that isn't the issue - the fact that it doesn't exist is the issue).

If you look at the network traffic (HTTP requests) in the browser, it should give you a clue as to what's going on.

You need to change your client-side URLs to use either root-relative (starting with a slash) or absolute (scheme + hostname) URLs to fix this issue.

See my answer to the following question on the Webmasters stack that explains this further:

  • https://webmasters.stackexchange.com/questions/86450/htaccess-rewrite-url-leads-to-missing-css

can not load css and js after htaccess redirect url in php

As you know, the default bahavior of base is to replace the url(adress) before the relative adress.
example:


<base href="http://www.mywebsite.com/images/" target="_blank">

The browser will look for the image "html5.png" at "http://www.mywebsite.com/images/html5.gif".

Hope it help you !

.htaccess rewrite url remove CSS,JS,AND IMAGES Whatever i do its not working

Because you are rewriting rules, you need also to rewrite base href HTML, or just add the full url to your styles,js and images.
Example base href:

   <head>
<base href="https://www.yourwebsite.com/">
</head>


Related Topics



Leave a reply



Submit