Django static precompiler does not seem to be working with scss files for me. I already checked if i had the compiler installed and my settings for django are are follows
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'static_precompiler',
'cms',
]
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
'static_precompiler.finders.StaticPrecompilerFinder',
)
STATIC_URL = '/static/'
STATIC_ROOT = "static"
and i am calling the same from django template as follows
{% load compile_static %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spacemailer</title>
{% block seo %}
{% endblock %}
<link rel="stylesheet" href="{% static 'style/main.scss' | compile %}" type="text/css" media="all" />
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
There are no errors whatsoever. The output is the same scss file with no compilations being made. Can someone point out what am i doing wrong with the same ? or some alternatives that will support compiling scss as well as coffee scripts
By default the compilation should be done at run time serving the template with
compilefilter.
{% static "js/alert.es6"|compile %}
Renders
<script type="application/javascript" src="/static/COMPILED/js/alert.js"></script>
If your using a different storage and STATIC_PRECOMPILER_DISABLE_AUTO_COMPILE is True compile using compilestatic before collectstatic
Verify the Compiler configuration
STATIC_PRECOMPILER_COMPILERS = (
('static_precompiler.compilers.SCSS', {
"executable": "/usr/bin/sass",
"sourcemap_enabled": True,
"compass_enabled": True,
"load_paths": ["/path"],
"precision": 8,
"output_style": "compressed",
}),
)
Related
I have a django project that structure is like this:
>vira
>vira
-__init.py
-settings.py
-urls.py
-wsgi.py
>vira_app
>migrations
>template
-index.html
>static
>vira_app
>assets
>css
>js
>vendor
>aos
>bootstrap
>bootstrap-icons
>isotope-layout
>swiper
-__init__.py
-admin.py
-apps.py
-models.py
-tests.py
-urls.py
-views.py
-db.sqlite3
-manage.py
I have used bootstrap. index.html is like below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
{% load static %}
<link href="{% static 'vira_app/assets/vendor/aos/aos.css' %}" rel="stylesheet">
<link href="{% static 'vira_app/assets/vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'vira_app/assets/vendor/bootstrap-icons/bootstrap-icons.css' %}" rel="stylesheet">
<link href="{% static 'vira_app/assets/vendor/swiper/swiper-bundle.min.css' %}" rel="stylesheet">
{% load static %}
<link href="{% static 'vira_app/assets/css/style.css' %}" rel="stylesheet">
</head>
<body>
<main id="main">
<div id="portfolio-grid" class="row no-gutter" data-aos="fade-up" data-aos-delay="200">
{% if catalogue_list %}
{% for Catalogue in catalogue_list %}
<div class="item web col-sm-6 col-md-4 col-lg-4 mb-4">
<a href="{{ Catalogue.link }}" class="item-wrap fancybox">
<div class="work-info">
<h3>{{ Catalogue.title }}</h3>
<span>{{ Catalogue.source }}</span>
</div>
<img class="img-fluid" src="{{ Catalogue.image }}">
</a>
</div>
{% endfor %}
{% endif %}
</div>
</div>
</main>
<i class="bi bi-arrow-up-short"></i>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
settings.py:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
os.path.join(BASE_DIR, 'vira_app', 'template')
],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
STATIC_URL = '/static/'
STATIC_ROOT = '/vira_app/template'
When I run the server and go to index.html, data retrieved from db and show well, but without any style!
I have tried some solution, check every static url, but not working
In fact, css, js and vendors not applied. What's the problem?
Some of settings are misused:
STATIC_URL = '/static/' - this is fine
STATIC_ROOT = '/vira_app/template' - nope, this is supposed to be some folder not really related to the project structure. In the end, on prod it can be a CDN URL or a folder on different server. So try changing it to something like STATIC_ROOT = os.path.join(BASE_DIR, 'static') for the start.
As mentioned in comments you might need to define STATICFILES_DIRS - a list of folders where from static files must be collected to STATIC_ROOT by collectstatic command. This means you can have many subfolders containing static files in different places. However you'll need to collect those files all together to deploy somewhere. STATICFILES_DIRS + collectstatic will collect all of those files for you into given STATIC_ROOT (and contents of this folder should be deployed somewhere, to CDN for example).
Note, default set of STATICFILES_FINDERS already contains AppDirectoriesFinder which will automatically find all the static subfolders in any of the project apps. This means if you move static subfolder from templates to the vira_app root - you won't have to mention it in the STATICFILES_DIRS.
So:
STATIC_ROOT should not point to any templates subfolders, change it to something more "global"
STATICFILES_DIRS should link to the folder(s) where you keep your static files now or this folder should be moved to the root of vira_app to let collectstatic find it
collectstatic must be run before checking your styles and scripts in rendered page
after running collectstatic all the static files must persist in STATIC_ROOT so django will be able to map relative urls after STATIC_URL to relative paths after STATIC_ROOT and those files will be loaded
PS
Note, some of your static files are linked in wrong way in the shown template:
<script src="assets/vendor/aos/aos.js"></script>
this should be changed to {% static... as well.
This question already has answers here:
Django CSS not updating
(11 answers)
Closed 2 years ago.
my first question here. I'm still new to both Django and CSS.
I'm trying to use CSS from Static folder in my Django project. It's all at a pretty basic stage.
In the 'static' subfolder 'css' I have one main.css file with example code:
body{
font-size: 20px;
background-color: black;
}
h1{
color: #008000;
}
In my settings.py file I have:
import os
(...)
DEBUG = True
(...)
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
And in my base.html template:
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shopping List</title>
<link rel="stylesheet" type="text/css" href="{% static '/css/main.css' %}">
</head>
<body>
<h1>TEST</h1>
{% block content %}
{% endblock %}
</body>
</html>
I've tried moving the css file, changing the view/url, and adding/deleting bootstrap (which alone works).
In the end my page just turns light blue-ish.
Thanks in advance.
So I checked your code and for me it works fine check if you have
'django.contrib.staticfiles' in your INSTALLED_APPS
If this didn't work I'm going to leave my code here, hope it helps.
-DjangoProject
-static
-css
-testing.css
template.html
{% load static %}
<link rel="stylesheet" href ="{% static 'css/testing.css' %}" type="text/css">
settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',]
...
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
I just noticed that my STATICFILES_DIRS is a tuple and not a list like in your example, I don't think it makes any difference but you could try it.
Not sure if this will work, but try removing the "/" before css in your html file:
... href="{% static 'css/main.css' %}">
Hi guys I'm new to django, now I'm facing problem that the already loaded bootstrap css template gave no effect on the page. I have read several post of this problem in this site, but none of it work. I use python 3.6.4 and django 2.0.
Here is my settings.py:
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, "static"), ]
settings.installed_apps :
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rango'
]
my index.html :
<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
<title>Rango</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="{% static "css/bootstrap.css" %}" />
the command prompt said :
[17/Feb/2018 20:06:14] "GET /static/css/bootstrap.css HTTP/1.1" 200 178152
When I copy paste all the bootastrap css style to the head it work
When I call an image from same static folder, it also can show the picture
<img src="{% static "images/alif.jpg" %}" width="500px" height="800px" alt="foto alif">
My debug set True and i use virtual environment
I also check on chrome developer tools>network>css. It said the css run
My folder structure:
tango
|
static
|
css
|
bootstrap.css
Can anyone help me to solve this?
i've figure out the problem, it was the False mimetype, so i add
import mimetypes
mimetypes.add_type("text/css", ".css", True)
and the problem is solved
Replace the static files loader in your index.html
your code:
{% load staticfiles %}
Replace with:
{% load static %}
I am trying to use django-fluent-comments along with Django 1.6. I tried following their github README tutorial for setting it up but some features like threaded comments and AJAX are not working.
my settings.py has this
INSTALLED_APPS += (
'fluent_comments',
'crispy_forms',
'django.contrib.comments',
'threadedcomments',
)
COMMENTS_APP = 'fluent_comments'
urls.py has this
urlpatterns += patterns('',
url(r'^blog/comments/', include('fluent_comments.urls')),
)
my template post_details.html
<html>
{% load comments %}
<head>
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}fluent_comments/css/ajaxcomments.css" />
</head>
<body>
<h1>{{post.title}}</h1>
<p>{{post.body}}</p>
<script type="text/javascript" src="{{ STATIC_URL }}fluent_comments/js/jquery-1.10.1.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}fluent_comments/js/ajaxcomments.js"></script>
{% render_comment_list for object %}
{% render_comment_form for object %}
</body>
</html>
I am able to see some the comments that I post. But the features that are not working are
1) AJAX support, when I post a reply i get redirected to another page
2) Threaded comments, I simply do not see them.
How do I enable these features ?
How to make base template use static files and to make other templates that inherits base template to use same static files?
As I read in django documentation it writes about how to use static files that are used for specific app. But I can't seem to find a way to make it use static files from outside app.
Given app inherits everything, but static files.
My settings.py:
STATIC_URL = '/static/'
# Additional locations of static files
STATICFILES_DIRS = (
# Put strings here, like "/home/html/static" or "C:/www/django/static".
# Always use forward slashes, even on Windows.
# Don't forget to use absolute paths, not relative paths.
)
# List of finder classes that know how to find static files in
# various locations.
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
# 'django.contrib.staticfiles.finders.DefaultStorageFinder',
)
INSTALLED_APPS = (
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.sites',
'django.contrib.messages',
'django.contrib.staticfiles',
'south',
'myproject.apps.finance',
'myproject.apps.base',
'django.contrib.admin',
)
TEMPLATE_CONTEXT_PROCESSORS = (
'django.core.context_processors.debug',
'django.core.context_processors.i18n',
'django.core.context_processors.media',
'django.core.context_processors.static',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
)
This is my current homepage settings:
url for homepage:
from django.conf.urls import patterns, include, url
from myproject.views import hello
urlpatterns = patterns('',
('', hello),
)
view of homepage:
from django.shortcuts import render_to_response
from django.http import Http404, HttpResponse
import datetime
def hello(request):
hello = "Hello World"
return render_to_response('home/home.html', {'hello': hello})
homepage template:
{% extends "base/base.html" %}
{% block title %} My Homepage {% endblock %}
{% block content %}
<p>I say {{ hello }}</p>
{% endblock %}
base template:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<link rel="stylesheet" href="{{ STATIC_URL }}/css/style.css">
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<h1>My Personal Finance Site</h1>
{% block content %}{% endblock %}
{% block footer %}
<section class="divider1">
<p>Thanks for visiting my site.</p>
<p>All rights reserved</p>
</section>
{% endblock %}
</body>
</html>
my CSS file is located in empty project called base. But I think there could be better way to use static files that are outside given app.
So what would be the best way to link base template with css file to make other templates that intherits base, to get same css file configuration?
base.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
{% block css %}
<link rel="stylesheet" href="{{ STATIC_URL }}/css/style.css">
{% endblock %}
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<h1>My Personal Finance Site</h1>
{% block content %}{% endblock %}
{% block footer %}
<section class="divider1">
<p>Thanks for visiting my site.</p>
<p>All rights reserved</p>
</section>
{% endblock %}
</body>
</html>
page.html
{% extends "base/base.html" %}
{% block title %} My Homepage {% endblock %}
{% block css %}{{block.super}}
//put css here
{% endblock %}
{% block content %}
<p>I say {{ hello }}</p>
{% endblock %}
urls.py
from django.conf.urls import patterns, include, url
from django.conf.urls.static import static
from django.contrib import admin
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from project_name import settings
admin.autodiscover()
urlpatterns = patterns('',
.......
) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
urlpatterns += staticfiles_urlpatterns()
settings.py
import os
import sys
..........................
SITE_ROOT = os.path.dirname(__file__)
sys.path.insert(0, os.path.join(SITE_ROOT, 'app_name'))
MEDIA_ROOT = os.path.join(SITE_ROOT, 'media')
MEDIA_URL = '/media/'
STATIC_ROOT = os.path.join(SITE_ROOT, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = (
# Put strings here, like "/home/html/static" or "C:/www/django/static".
# Always use forward slashes, even on Windows.
# Don't forget to use absolute paths, not relative paths.
os.path.join(SITE_ROOT, 'staticfiles'),
)
TEMPLATE_DIRS = (
# Put strings here, like "/home/html/django_templates" or "C:/www/django/templates".
# Always use forward slashes, even on Windows.
# Don't forget to use absolute paths, not relative paths.
os.path.join(SITE_ROOT, 'templates'),
)
....................
make sure that the template tag "{% load static %}" is at the top of your .html file. that will load your static folder.
sample
{% load static %}
{% extends "base/base.html" %}
{% block title %} My Homepage {% endblock %}
{% block css %}{{block.super}}
//put css here
{% endblock %}
{% block content %}
<p>I say {{ hello }}</p>
{% endblock %}