css/js is not working after add htacess

Question

i have .htaccess file and this is a script within it:

<IfModule mod_rewrite.c>


Options +FollowSymLinks
RewriteEngine on

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^register/$ index.php?c=Page&a=register [L]


</IfModule>

in my layout file, i load css and js with absolute path like this:

<link href="/public/assets/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/public/assets/bower_components/bootstrap-extension/css/bootstrap-extension.css" rel="stylesheet">

and i access localhost/project/register/ but

the css/js file is not loaded bacause of error:

GET http://localhost/public/assets/bootstrap/dist/css/bootstrap.min.css net::ERR_ABORTED

why it directly access to /public after localhost? it should be localhost/project/public not localhost/public

if i remove first / at css link it access to localhost/project/register/public

because i need every assets folder is based on /project folder — Mamen
– Mamen, Commented Mar 9, 2018 at 18:40

anubhava · Accepted Answer · 2018-03-09 18:58:57Z

4

Your css link is not correct. It is starting with /public which means Apache will attempt to find it in the public folder under site root.

You should update your path to relative one:

<link href="public/assets/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="public/assets/bower_components/bootstrap-extension/css/bootstrap-extension.css" rel="stylesheet">

And then add this just below <head> section of your page's HTML:

<base href="/project/" />

so that every relative URL is resolved from that base URL and not from the current page's URL.

Alternative to <base ../> tag in HTML, you can use this redirect rule in your .htaccess as very first rule:

RewriteRule ^public/.+\.(?:css|js)$ /project%{REQUEST_URI} [L,NC,NE,R=301]

However do note that a redirect rule (even with R=301) will still make a new client to send 2 requests to your web server. First with /public/... URI and 2nd a /project/public/... URI after redirect.

edited Mar 9, 2018 at 18:58

answered Mar 9, 2018 at 18:42

anubhava

790k67 gold badges603 silver badges671 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mamen Over a year ago

wow it's working ,you save my time, but is there any solution with htaccess file and without base tag? because i dont want it can be edited on inspect element

anubhava Over a year ago

ok I will add a .htaccess solution also but this one is more preferred one.

Mamen Over a year ago

and one more, how to define project/public/ as pubic folder in htaccess , so i just have to write 'assets/cssfile.css'

anubhava Over a year ago

Just change above redirect rule to: RewriteRule ^assets/.+\.(?:css|js)$ /project/public%{REQUEST_URI} [L,NC,NE,R=301]

DKing · Accepted Answer · 2018-03-09 18:44:29Z

0

It seems that you have two separate questions.

For your question, there is nothing in that .htaccess rule you've shown which would change the way that an existing .css or .js file would be displayed. And so, very likely either your links weren't working before, or you had some other content in the file before to rewrite the URLs differently that you have removed. That file is simply stating that if a URL is given and there is no file or directory which matches it, then rewrite the URL for a certain URL. That does seem to be a mistake, since the URL either exists or does not.

Your second question is about the URLs and why you don't have /project in them. I'm not certain why you believe they should have /project in them, but I'm assuming that you had assumed that because your original HTML is in that directory. You are starting your link with a /, as in /public/assets/bootstrap/dist/css/bootstrap.min.css". That / means that the path is absolute, rather than relative, meaning that the path is started directly after the hostname. If you remove the initial /, then the path would be relative to the URL that it is called from.

answered Mar 9, 2018 at 18:44

DKing

6056 silver badges18 bronze badges

1 Comment

Mamen Over a year ago

yes, there is nothing rule to change the existing .css file, because i don't know it and i'am new in htaccess, and what am i asking for is what is rule that can solve it, i mean what is rule that declare project is base url. so i don't have to use project/public to access .css file

War10ck · Accepted Answer · 2018-03-09 18:48:32Z

0

If you want to load these files relative to the domain root and the public directory is not in the domain root, you'll need to provide the full domain relative path:

<link href="/project/public/assets/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/project/public/assets/bower_components/bootstrap-extension/css/bootstrap-extension.css" rel="stylesheet">

answered Mar 9, 2018 at 18:48

War10ck

12.5k7 gold badges46 silver badges56 bronze badges

Collectives™ on Stack Overflow

css/js is not working after add htacess

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related