Ubuntu虚拟机中XAMPP无法加载CSS文件问题求助

Hey there, I’ve dealt with exactly this kind of cross-platform path/permissions headache before — let’s get your CSS loading properly. Here are the most likely fixes, ordered by how often they solve this issue:

1. Fix Relative Paths (Most Common Culprit) #

When you access https://localhost/home/index.php, all your relative links (like lib/bootstrap/css/bootstrap.min.css) are resolving to https://localhost/home/lib/... instead of the actual location https://localhost/lib/... (since your files live directly in htdocs/, not htdocs/home/).

Solution: Use root-relative paths by adding a leading / to all your asset links. Update your <head> section like this:

<!-- Favicons -->
<link href="/img/favicon.png" rel="icon">
<link href="/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts (leave these as-is, they're absolute URLs) -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Montserrat:300,400,500,700" rel="stylesheet">
<!-- Bootstrap CSS File -->
<link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Libraries CSS Files -->
<link href="/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="/lib/animate/animate.min.css" rel="stylesheet">
<link href="/lib/ionicons/css/ionicons.min.css" rel="stylesheet">
<link href="/lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="/lib/lightbox/css/lightbox.min.css" rel="stylesheet">
<!-- Main Stylesheet File -->
<link href="/css/style.css" rel="stylesheet">

This tells the browser to start looking from the root of your server (htdocs/) no matter what subdirectory your PHP file is in.

2. Check Linux File Permissions #

Ubuntu’s strict file permissions often block Apache from reading assets, even if they exist. Windows ignores these permissions, which is why it worked there.

Fix via Terminal:

1. Navigate to your XAMPP htdocs directory (default path below — adjust if yours is different):

   cd /opt/lampp/htdocs
   

2. Recursively set read/execute permissions for all asset directories:

   sudo chmod -R 755 css/ lib/ img/
   

3. Make sure the Apache user owns these files (Ubuntu’s Apache runs as www-data by default):

   sudo chown -R www-data:www-data css/ lib/ img/
   

3. Verify Case Sensitivity (Easy to Miss!) #

Linux is case-sensitive, while Windows is not. If your actual file is named Style.css but your code references style.css, Windows will load it fine — but Ubuntu won’t.

Double-check:

• Compare every directory and filename in your css/ and lib/ folders to the paths in your HTML. For example, ensure lib/bootstrap/css/bootstrap.min.css matches exactly (no uppercase letters where they shouldn’t be).

4. Force Browser Cache Refresh #

Sometimes your browser caches old, broken path attempts. Try:

• Pressing Ctrl + Shift + R (Windows/Linux) to force a hard refresh
• Opening the page in an incognito/private window to bypass cache

内容的提问来源于stack exchange，提问作者thegillionaire