CODEWITHSUNDEEP
cssdjangosvelte
Raf Rasenberg
Raf Rasenberg

Reputation: 674

Django + Svelte styles not working, MIME type ('text/html') is not a supported stylesheet MIME type

I am trying to connect my Django app to a Svelte front-end. I directed my template finder to the build directory of the Svelte folder. I won't be using the template features of Django, will be just using DRF with a Svelte frontend so that functionality I do not need. I just want Django to serve the compiled files.

TEMPLATES = [
    {
        ...
        'DIRS': [
            BASE_DIR / '../frontend/public/'
        ],
        ...
    },
]

Then in my view I can just use:

urlpatterns = [
    path('', TemplateView.as_view(template_name="index.html"))
    
]

When I open my home view on localhost:8000 it loads the index.html just fine. The only problem is that my styles are not being loaded. This is the folder structure:

backend
  app
    settings.py
frontend
  public
    build
      bundle.js
      bundle.css
    index.html
    global.css

As my STATIC_ROOT and STATIC_URL I use this:

STATIC_URL = '/build/'
STATIC_ROOT = BASE_DIR / '../frontend/public/'

This works also fine, if I use python3 manage.py collectstatic I get the admin styles in my build directory and I can access the Django admin completey fine.

However, when I try to access my homepage on my development server I get these errors in my console:

Refused to apply style from 'http://localhost:8000/global.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

This is the content of index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1'>

    <title>Svelte app</title>

    <link rel='icon' type='image/png' href='/favicon.png'>
    <link rel='stylesheet' href='/global.css'>
    <link rel='stylesheet' href='/build/bundle.css'>

    <script defer src='/build/bundle.js'></script>
</head>

<body>
</body>
</html>

I Searched on Google and tried to add or remove / on the style references but unfortunately that also did now work.

Why do I get these errors? How can I make sure that Django loads the styles from the build directory correctly?

Upvotes: 0

Views: 916

Answers (2)

G.Lebret
G.Lebret

Reputation: 3108

I got the same error, it was a misconfiguration of my apache2 .conf In /etc/apache2/sites-enabled, you should have something like :

WSGIScriptAlias / 
/var/www/myprojectname/myprojectname/wsgi.py
WSGIPythonPath /var/www/myprojectname/

<VirtualHost *:80>
    ServerName mydomainname
    WSGIApplicationGroup %{GLOBAL}

    Alias /static/ /var/www/myprojectname/static/

    <Directory /var/www/myprojectname/>
            <Files wsgi.py>
                    Order deny,allow
                    Allow from all
             </Files>
     </Directory>
</VirtualHost>

Pay attention to the path in Directory.

For information, my settings.py files contains :

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'
STATIC_ROOT = '/var/www/myprojectname/static/'

Upvotes: 0

Jose Paredes
Jose Paredes

Reputation: 11

I got the same "MIME type ('text/html') is not executable" issue and I fixed it using the django static template tag, to make it work I made this changes.

In settings.py

TEMPLATES = [
{
   ...
   'DIRS': ['./frontend/public'],
   'APP_DIRS': False,
   ...
},
]

# Static files (CSS, JavaScript, Images)

STATIC_URL = '/static/'

STATICFILES_DIRS = [
BASE_DIR /"frontend/public",
]

The view.py is fine

Folder Structure:

backend
  app
    settings.py
  frontend
    public
      build
        bundle.js
        bundle.css
      index.html
      global.css

In your svelte index.html, use the django static template tag {% load static %} and {% static 'path' %} to build the URLs.

frontend/public/index.html

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
  
   <!-- building urls using static tag -->
  <link rel='icon' type='image/png' href='{% static '/favicon.png'%}'>
  <link rel='stylesheet' href=' {% static 'global.css' %} '>
  <link rel='stylesheet' href='{% static '/build/bundle.css' %}'>

  <script defer src='{% static '/build/bundle.js' %}'></script>
</head>
<body>

</body>
</html>

Docs: Managing Static files

Upvotes: 1

Related Questions