Slim 3 not rendering assets

So I'm trying to render my global stylesheet but I am getting an error

[Error] Did not parse stylesheet at 'http://localhost:8888/css/app.css' because non CSS MIME types are not allowed in strict mode.

Here is my code:

app.twig

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>App</title>
        <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
        <link rel="stylesheet" href="{{ base_url() }}/css/app.css">
    </head>
    <body>
        {% block content %}{% endblock %}
    </body>
</html>

index.twig

{% extends 'app.twig' %}

{% block content %}
    Hello from {{ appName }}!
{% endblock %}

app.css

* { box-sizing: border-box; }

html, body {
  font-family: 'Playfair Display', serif;
  background: yellow;
}

As you can see in my structure the file is there screenshot

I've been looking to resolve this issue but can't see to find the fix, any help is appreciated.

Solution

You should configure your web server to parse and send the CSS file directly.

If you're using the built-in PHP web server, then add this to the top of index.php:

if (PHP_SAPI == 'cli-server') {
    $_SERVER['SCRIPT_NAME'] = basename(__FILE__);
    // To help the built-in PHP dev server, check if the request was actually for
    // something which should probably be served as a static file
    $url  = parse_url($_SERVER['REQUEST_URI']);
    $file = __DIR__ . $url['path'];
    if (is_file($file)) {
        return false;
    }
}

If you're using Apache or Nginx, then look at https://www.slimframework.com/docs/start/web-servers.html