I am currently learning django and I tried to apply bootstrap css for my little project but it keeps throwing this following error and doesn't apply.
Refused to apply style from 'https://stackpath.bootstrapcdn.com/%20%20%20%20bootstrap/4.4.1/css/bootstrap.min.css' because its MIME type ('application/xml') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
This is my code.
<!Doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/
bootstrap/4.4.1/css/bootstrap.min.css" integrity="
sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<title>crm1</title>
</head>
<body>
{% include 'accounts/navbar.html'%}
{% block content %}
{% endblock %}
<hr>
<h5>Our footer</h5>
</body>
</html>
Your template doesn't seem to have {% load static %} at the top. Read docs here
I think you need to create a new directory (with a static name) in your Django project. And re-create a new directory (named css).
Directory tree :
Your Project -> new directory -> static -> new directory -> css
And download bootstrap.min.css file and copy/paste into css file.
project
|_static
|_css
|_bootstrap.min.css
You can change your code as follows:
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"/>
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
Related
I just created a django application, and I have a problem that I cannot resolve. I have 1 css file 'root.css' that I would like to link with my html database but it's like this /static/root.css was completely ignored. I arrive mostly at link /static/home/home.css on my home app.
This is not work (/templates/base.html) :
{% load static %}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" lang="fr-FR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="stylesheet" type="text/css" ref="{% static 'root.css' %}"> **// Not work**
{% block css %}
{% endblock %}
<title>Learned</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
This is work (/home/templates.home.html) :
{% block css %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'home/home.css' %}">
{% endblock %}
In my settings.py :
STATIC_URL = 'static/'
STATICFILES_DIRS = [
BASE_DIR / "static"
]
OMG, I just understood the error! I just made a typo, I'm stupid I put "ref" instead of "href" in my first link. It sure works better like this: D
Are you running this with Debug = False (production)? If so you need something else to serve the static files , check https://docs.djangoproject.com/en/3.1/howto/static-files/
i have connected django to vue using webpack loader
before running the command npm build everythig was fine by running both terminals everything's working fine but just after running that command and connecting the static file and when i tried to check localhost:8000(defaul django server) i dont see anything not even in console no error and there is nothing
here is my
base.html file
<
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Question Time</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
{% block style %}
{% endblock %}
</head>
<body>
{% block content %}
{% endblock %}
</body>
{% block js %}
{% endblock %}
</html>
and here is my index.html
{% extends "base.html" %}
{% load static %}
{% block style %}
<link rel="stylesheet" href="{% static 'bundle.css' %}">
{% endblock %}
{% block content %}
<noscript>
<strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
{% endblock %}
{% block js %}
<link rel="stylesheet" href="{% static 'bundle.js' %}">
{% endblock %}
i have tried removing dist folder from vue
i have tried removing all the static links which casused this issue but its of no use
https://stackoverflow.com/questions/47034452/how-to-run-production-site-after-build-vue-cli tried this solution as well
but still its of no use
You need to add {% load render_bundle from webpack_loader %}
!DOCTYPE html>
{% load render_bundle from webpack_loader %}
<html lang="en">
...
I am creating a web app using Django. I have a html template as follows:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
I am using this template to create other html files using
{% extends 'document.html' %}
{% block content %} {% endblock %}
for the moment I am referring to all css and js files in the original document.html. how can I refer to different js and css files in the new templates only when necessary?
thanks
Put this in your setting.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.dirname(BASE_DIR) + '/staticfiles/'
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)
create static folder in created app and put there your css, js and access via this
<link href="{{ static('/app_name/css/reset.css') }}" rel="stylesheet">
<script type="text/javascript" src="{{ static('/app_name/js/jquery-1.11.3.js') }}"></script>
now it's working. I made just few changes
{% extends 'document.html' %}
{% load staticfiles %}
{% block content %}
now I was able to include the js or css files I need it in the newly created template as follow for example
<script src="{% static 'vendors/js/tableexport.min.js' %}"></script>
everyone! I have an issue when inheriting from another template in Flask. My first file layout.html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flask</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<header>
<h1>Some header</h1>
</header>
<content>
{% block content %}{% endblock %}
</content>
</body>
</html>
Second one "main.html":
{% extends "layout.html" %}
{% block content %}<p>test</p>{% endblock %}
Everything looks ok but when I load the page in browser the elements looks like this(everything from head is moved to body:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<meta charset="UTF-8">
<title>Flask</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
<script type="text/javascript" src="script.js"></script>
<header>
<h1>Some header</h1>
</header>
<content>
<p>test</p>
</content>
</body>
</html>
Can anyone explain why this happens?
Maybe a little bit too late... The issue was, that I'd changed my IDE. Before I'd used PyCharm, then I switched to Visual Studio. It looks like they both use different encoding and something broke during migration. Creating new file and copying content was the solution.
I'm trying to run Django on my Windows 10, I'm sort of newbie on Django, I'm using Compressor Toolkit, my problem is, I can run the manage.py but the localhost says
base.html, error at line 9 The process cannot access the file because
it is being used by another process.
<!DOCTYPE html>
{% load compress %}
{% load staticfiles %}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, inital-scale=1"/>
<title>{% block head_title %} Hydroqua Indonesia {% endblock head_title %}</title>
{% compress css %}
<link rel="stylesheet" type="text/x-scss" href="{% static '/css/global.scss' %}">
<link rel="stylesheet" type="text/x-scss" href="{% static '/css/style.scss' %}">
<link rel="stylesheet" href="{% static '/node_modules/bootstrap/dist/css/bootstrap.min.css' %}">
{% endcompress %}
</head>
<body>
{% include 'navbar.html' %}
{% block content %}{% endblock content %}
{% compress js %}
My friend could run the compressor smoothly from his Linux, I've installed every component needed but I dont know if I missed some.