CODEWITHSUNDEEP
css.htaccessxampp
Donderstal
Donderstal

Reputation: 25

XAMPP setup gives wrong mime type for CSS files

As a junior front-end developer, I've recently been experimenting with MySQL and PHP to hopefully become a full-stack guy one day. I've set up a small server and database. I'm running this through XAMPP, on localhost.

Now this is where things get funny. When I browse my little website, my CSS and JavaScript get loaded, but are completely empty. Let me illustrate that for you:

The horror of empty sources

Next to that, I get a warning in my console saying:

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost/public/css/style.css".

It keeps giving this, even though I defined the type as text/css in my HTML. Now this problem is driving me absolutely crazy for the past two days and I have no idea how to tackle it. Could it be a problem in my folder structure? Do I need to add or change something to my .htaccess file? All help will be greatly appreciated!!

Folder structure

--App

------Classes

------Controllers

------Models

------Views

----------Partials

--Lib

------Bootstrap

------NPM

--Public

------css

------img

------js

Upvotes: 1

Views: 1561

Answers (1)

delboy1978uk
delboy1978uk

Reputation: 12375

This sounds awfully like an .htaccess issue.

More than likely, every request is being rewritten to go through public/index.php, in a typical Front Controller Pattern.

However, we only want to do that if the files don't actually exist in the public folder.

Here's an .htaccess that provides this solution:

RewriteEngine On

# The following rule tells Apache that if the requested filename
# exists, simply serve it.

RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]


# The following rewrites all other queries to index.php. The 
# condition ensures that if you are using Apache aliases to do
# mass virtual hosting, the base path will be prepended to 
# allow proper resolution of the index.php file; it will work
# in non-aliased environments as well, providing a safe, one-size 
# fits all solution.

RewriteCond %{REQUEST_URI}::$1 ^(/.+)(.+)::\2$
RewriteRule ^(.*) - [E=BASE:%1]
RewriteRule ^(.*)$ %{ENV:BASE}index.php [NC,L]

Upvotes: 1

Related Questions