Solution:
This is achievable using the easier approach you suggest, you are just missing one /
.
If you link to your CSS file using a path like this; /css/sample.css
then it tells the browser to fetch that document in relation to the root URL. This is the same for any asset you use.
So as an HTML link it would be:
<link href="/css/sample.css" rel="stylesheet">
This would tell the browser, no matter what page you are on, to fetch the sample.css
file from http(s)://example.com/css/sample.css
.
Without the /
at the beginning, your link is saying fetch it in relation to the current page; http(s)://example.com/your/page/url/css/sample.css
. On your homepage this will obviously be successful as the URL would still resolve to http(s)://example.com/css/sample.css
.