Q&A
Djangoでアプリを作っていますがCSSが反映されずChromo Developertool コンソールに下記エラー情報が出力されてしまいます。
・エラーコード
because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
以下設定情報です。
・バージョン
asgiref==3.2.10
colorama==0.4.4
Django==3.1
gunicorn==20.1.0
mysqlclient==2.0.3
onetimepass==1.0.1
Pillow==8.0.1
pytz==2021.1
qrcode==6.1
six==1.15.0
sqlparse==0.3.1
.ディレクトリ構成
/portfolio/code/booking/settings.py
/portfolio/code/authentication/templates/authentication/mypage.html
/portfolio/code/authentication/static/authentication/style.css
/portfolio/code/templates/base.html
・settings.py
py
1INSTALLED_APPS = [ 2 'personality.apps.PersonalityConfig', 3 'menus.apps.MenusConfig', 4 'payment.apps.PaymentConfig', 5 'authentication.apps.AuthenticationConfig', 6 'django.contrib.admin', 7 'django.contrib.auth', 8 'django.contrib.contenttypes', 9 'django.contrib.sessions', 10 'django.contrib.messages', 11 'django.contrib.staticfiles', 12] 13・・・ 14 15STATIC_URL = '/static/' 16#DevEnv 17STAICFILES_DIRS = os.path.join(BASE_DIR,'static') 18#DevEnv 19#STATIC_ROOT = '' 20#ProEnv 21#STATIC_ROOT = '/usr/share/nginx/html/static' 22
（本番環境ではNginx＋gunicorn+MySQL
開発環境ではgunicorn+MySQLという構成にしているため、#DevEnv #ProEnvと環境ごとに設定を切り替えています。）
・mypage.html
html
1{% extends 'base.html' %} 2{% load static %} 3{% block content %} 4 {% block extrahead %} 5 <link rel="stylesheet" href="{% static 'authentication/style.css' %}"> 6 {% endblock %} 7 <div class="rendering-mypage"> 8 <p class="title">MY PAGE</p> 9 <p class="rendering-mypage-name">{{ user_name }}さんのページ</p> 10 <a href="{% url 'menus:menulist' %}" class="rendering-mypage-item"> 11 <p class="rendering-mypage-item-title">献立確認/予約</p> 12 <img class="rendering-mypage-item-image-food" src="{%static "authentication/food.png"%}" > 13 </a> 14 <a href="{% url 'payment:top' %}" class="rendering-mypage-item"> 15 <p class="rendering-mypage-item-title">支払予定金額確認</p> 16 <img class="rendering-mypage-item-image-wallet" src="{%static "wallet.png"%}" > 17 </a> 18 </div> 19{% endblock %}
・base.html
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 7 <link rel="stylesheet" type="text/css" href="{% static 'reset.css' %}"> 8 <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}"> 9 <title>{% if request.path != '/' %}{% block title %}{% endblock %} | {% endif %}Blog App with Auth | Django2 Tutorial</title> 10</head> 11<body> 12 <header class="header"> 13 <nav class="global-nav"> 14 <ul> 15 <li class="nav-item active"><a href="#">HOME</a></li> 16 <li class="nav-item"><a href="#">ABOUT</a></li> 17 <li class="nav-item"><a href="#">NEWS</a></li> 18 <li class="nav-item"><a href="#">TOPICS</a></li> 19 </nav> 20 </header> 21 <div class="wrapper clearfix"> 22 <main class="main-content"> 23 {% block content %}{% endblock %} 24 </main> 25 </div> 26</body> 27<html>
・調べたこと
有効なstaticファイルを調査いたしました。下記の通りです。(authenticationアプリ以下のstaticファイルは有効化されていそうです・・。）
py
1root@8d73d5244776:/code# python3 manage.py findstatic . 2Found '.' here: 3 /code/menus/static 4 /code/authentication/static 5 /usr/local/lib/python3.9/site-packages/django/contrib/admin/static
完全に沼にはまっています。
お手数おかけいたしますがご回答おまちしております。m(__)m
回答1件
0
1.base.htmlに{% block extrahead %}が記載する。
2.mypage.htmlの{% block content %}より前に{% block extrahead %}記載する。
#mypage.html {% block extrahead %} <link rel="stylesheet" href="{% static 'authentication/style.css' %}"> {% endblock %} {% blockcontent%} ... {% endblock %}
これでどうでしょうか？
投稿2021/04/29 15:44
総合スコア19
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。