I'm still just playing around with Django and cannot figure out what I am doing wrong with my CSS file. My HTML works but not the CSS. I'm guessing it has something to do with settings.py or some special "Django code" I'm not using. Here is the code for my HTML (what I am guessing is the relevant code to show).
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>home</title>
<link rel="stylesheet" type="text/css" href="../css/styles.css"/>
</head>
<body>
<h3>HELLO WORLD!</h3>
</body>
</html>
Here is my settings.py:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'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',
],
},
},
]
WSGI_APPLICATION = 'ecommerce005.wsgi.application'
# Database
# https://docs.djangoproject.com/en/1.11/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
Here is my urls.py:
from django.conf.urls import url
from django.contrib import admin
from .views import home_page
urlpatterns = [
url(r'^$', home_page),
url(r'^admin/', admin.site.urls),
]
Here is my views.py:
from django.http import HttpResponse
from django.shortcuts import render
def home_page(request):
return render(request, "index.html", {})
The order of my file are as follows:
'src' directory:
1) 'css' folder holds my styles.css file
2) 'projectname' folder contains all of my django files shown above
3) 'templates' folder holds my index.html file
Please be as specific as possible. I found sources online but they seemed too vague for me to find a solution. I appreciate your help.
Configure static files in settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS=[
(os.path.dirname(BASE_DIR),"static"),
]
STATIC_ROOT = (os.path.dirname(BASE_DIR),"static_files")
In Templates,(ie HTML file)
{% load static %}
<html>
....
<link href="{% static 'styles/style.css' %}" rel="stylesheet" media="screen, print" type="text/css">
Directory Structure
-ProjectFolder
--|static
----|styles
------|styles.css
You need to setup a 'STATIC_ROOT' in the settings.py
STATIC_URL = '/staticfiles/'
STATIC_ROOT = os.path.join(BASE_DIR, '/static/')
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
If DEBUG=False, you need to setup your proxy server such as nginx to serve these staticfiles
This link can explain it further.
Wootton, as was said, you need to setup your static_root on settings.py, after that you can just call your css
<link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}css/style-responsive.css">
but before/after setup the static_root you need to create a folder named static and serve your css in there.
I think this will help you!
Related
Using django v2.2.1
I have a given project dir. structure:
In root project dir. there are some static files in static dir.
In base.html file,
{% load static %}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- favicon -->
<link rel="shortcut icon" href="{% static 'favicon.ico' %}" />
<!-- Dropzone js -->
<link rel="stylesheet" href="{% static 'dropzone.css' %}">
<script src="{% static 'dropzone.js' %}" defer></script>
<!-- Custom js & css -->
<link rel="stylesheet" href="{% static 'style.css' %}">
.
.
This is settings.py file:
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIR = [
os.path.join(BASE_DIR, 'static'),
os.path.join(BASE_DIR, 'sales', 'static'),
]
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
In urls.py
from django.contrib import admin
from django.urls import include, path
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('sales.urls', namespace='sales')),
path('reports/', include('reports.urls', namespace='reports'))
]
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Also urlpatterns for sales
urlpatterns = [
path('', home_view, name='home'),
path('sales/', SaleListView.as_view(), name='list'),
path('sales/<pk>/', SaleDetailView.as_view(), name='detail'),
]
Tried
$ python manage.py findstatic style.css
No matching file found for 'style.css'.
Also I've been getting this error
I have restarted the server many times.
Adding the following to TEMPLATES in settings.py should help in your case:
For Django3.x
TEMPLATES = [
{
...
'DIRS': [BASE_DIR / 'templates'],
'APP_DIRS': True,
...
}
For Django2.x
import os
...
TEMPLATES = [
{
...
'DIRS': os.path.join(BASE_DIR, 'templates'),
'APP_DIRS': True,
...
}
The title is pretty much self explanatory. I did put some images in the static/rakunai folder and added the dirs etc, the whole shebang. I still can't get to display it. I am using docker. Python 3.8 was used and the newest django version was used.
The settings.py:
```
"""
Django settings for rakunai project.
Generated by 'django-admin startproject' using Django 2.2.12.
For more information on this file, see
https://docs.djangoproject.com/en/2.2/topics/settings/
For the full list of settings and their values, see
https://docs.djangoproject.com/en/2.2/ref/settings/
"""
import os
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = []
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'rakunai.urls'
STYLESHEETS='/stylesheets/'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': ['templates'],
'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',
],
},
},
]
WSGI_APPLICATION = 'rakunai.wsgi.application'
# Database
# https://docs.djangoproject.com/en/2.2/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.postgresql',
'NAME': 'postgres',
'USER': 'postgres',
'PASSWORD': 'postgres',
'HOST': 'db',
'PORT': 5432,
}
}
# Password validation
# https://docs.djangoproject.com/en/2.2/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/2.2/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = ['rakunai']
```
templates/aboutus.html:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--todo:fix this-->
<link rel="stylesheet" href="{% static 'styles.css' %}" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<title>Index page</title>
...
<div class="row rowteams align-tems-center">
<div class="col-xs-12 col-sm-6 padding-0">
<img class="teamimages" src="{% static 'rakunai/img.jpg' %}">
</div>
<div class="col-sm-6 padding-0 skobeloff-bg linen-text">
<h2>
Simonas Bansevičius
</h2>
<h5>
CEO
</h5>
</div>
</div>
views.py:
from django.http import HttpResponse
from django.shortcuts import render
def index(request):
return render(request, 'index.html')
def about(request):
return render(request, 'about.html')
def css(request):
return render(request, 'styles.css')
Urlpaterls:
from rakunai.views import index as home
from rakunai.views import about as details
from rakunai.views import css
urlpatterns = [
path('admin/', admin.site.urls),
path('', home),
path('about', details),
]
Any type of feedback is highly appreciated.
BASE_DIR = os.path.dirname(os.path.dirname(
os.path.dirname(os.path.abspath(__file__))))
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'rakunai')]
MEDIA_URL = '/media/'
in settings.py
<img class="teamimages" src="/static/media/img.jpg" %}">
in html file
put images in rakunai/media/
from django.conf import settings
from django.conf.urls.static import static
urlpatterns += static(settings.MEDIA_URL,
document_root=settings.MEDIA_ROOT)
add this in urls.py
You have not included the static urls and media urls in your urls.py.
Including them would look something like this:-
from django.contrib import admin
from django.conf import settings
from django.conf.urls.static import static
from django.urls import path
from rakunai.views import index as home
from rakunai.views import about as details
urlpatterns = [
path('admin/', admin.site.urls),
path('', home),
path('about', details),
]
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Why does not it work in Django? There is error in the browser like that.
its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
In file html there is :
<link rel="stylesheet" href="{% static 'nowy.css' %}">
In settings.py it looks like:
STATIC_URL = '/static/'
Dirs are: app > static > nowy.css
I can't find where is the mistake.
this can be caused by your settings static variables, or your addressing to your css file.
first try to check settings.
did you include STATICFILES_DIRS ?
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
and also try checking template settings.
did you include loader?
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')]
,
'APP_DIRS': False,
'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',
],
'loaders': [
'django.template.loaders.filesystem.Loader',
'django.template.loaders.app_directories.Loader',
],
},
},
]
now try to check the path to your css file.
project
app_name
static
app_name
style.css
in your html it would be like this
{% load static %}
<link rel="stylesheet" href="{% static "app_name/style.css" %}">
As someone relatively new in Web Development in Django I'm struggling with the staticfiles within my project. Whenever I take some prepared bootstrap template something is not working, same when I try to add some javascript - and have no idea why. I tried to find the answer before, but in theory, everything should work - would be awesome if someone could guide me, cuz I feel completely lost now. Everything works fine until I want to use some advanced js/css animations.
It looks like in the image - the main background doesn't load, the navibar is shattered as well.
My settings I think look fine - Django collect all the static files, but they don't want to work on the local server. Everything is rooted in views.py/urls.py
Also here is the tree of the whole project
"""
Django settings for alexxx project.
Generated by 'django-admin startproject' using Django 2.2.4.
For more information on this file, see
https://docs.djangoproject.com/en/2.2/topics/settings/
For the full list of settings and their values, see
https://docs.djangoproject.com/en/2.2/ref/settings/
"""
import os
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = my code is hereeeeee, so I hid it cuzthe warning says so, lol
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = []
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'site12'
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'alexxx.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': ['templates/'],
'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',
],
},
},
]
WSGI_APPLICATION = 'alexxx.wsgi.application'
# Database
# https://docs.djangoproject.com/en/2.2/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
# Password validation
# https://docs.djangoproject.com/en/2.2/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/2.2/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static")
]
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
`<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="utf-8">
<title>WHY YOU DONT WORK DJANGO</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<!-- Bootstrap CSS File -->
<link href="{% static 'lib/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<!-- Libraries CSS Files -->
<link href="{% static 'lib/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet">
<link href="{% static 'lib/animate/animate.min.css' %}" rel="stylesheet">
<link href="{% static 'lib/ionicons/css/ionicons.min.css' %}" rel="stylesheet">
<link href="{% static 'lib/owlcarousel/assets/owl.carousel.min.css' %}" rel="stylesheet">
<link href="{% static 'lib/lightbox/css/lightbox.min.css' %}" rel="stylesheet">
<!-- Main Stylesheet File -->
<link href="{% static 'css/style.css' %}" rel="stylesheet">`</head>
(some code here)
<!-- JavaScript Libraries -->
<script src="{% static 'lib/jquery/jquery.min.js' %}"></script>
<script src="{% static 'lib/jquery/jquery-migrate.min.js' %}"></script>
<script src="{% static 'lib/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'lib/easing/easing.min.js' %}"></script>
<script src="{% static 'lib/superfish/hoverIntent.js' %}"></script>
<script src="{% static 'lib/superfish/superfish.min.js' %}"></script>
<script src="{% static 'lib/wow/wow.min.js' %}"></script>
<script src="{% static 'lib/waypoints/waypoints.min.js' %}"></script>
<script src="{% static 'lib/counterup/counterup.min.js' %}"></script>
<script src="{% static 'lib/owlcarousel/owl.carousel.min.js' %}"></script>
<script src="{% static 'lib/isotope/isotope.pkgd.min.js' %}"></script>
<script src="{% static 'lib/lightbox/js/lightbox.min.js' %}"></script>
<script src="{% static 'lib/touchSwipe/jquery.touchSwipe.min.js' %}"></script>
<!-- Contact Form JavaScript File -->
<script src="contactform/contactform.js"></script>
<!-- Template Main Javascript File -->
<script src="{% static 'js/main.js' %}"></script>
</body>
</html>
EDIT: Adding urls.py
from django.urls import path
from . import views
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns = [
path('', views.index),
]
urlpatterns += staticfiles_urlpatterns()
And the project one:
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('site12.urls'))
]
And the views:
from django.shortcuts import render
def index(request):
return render(request, 'templates/index.html')
I am looking to add a css file to Django but it can't find the static folder.
Here is my settings.py file:
"""
Django settings for opengarden project.
Generated by 'django-admin startproject' using Django 2.2.3.
For more information on this file, see
https://docs.djangoproject.com/en/2.2/topics/settings/
For the full list of settings and their values, see
https://docs.djangoproject.com/en/2.2/ref/settings/
"""
import os
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '__________'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = []
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'opengarden.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'wx', 'templates'),],
'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',
],
},
},
]
WSGI_APPLICATION = 'opengarden.wsgi.application'
# Database
# https://docs.djangoproject.com/en/2.2/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
# Password validation
# https://docs.djangoproject.com/en/2.2/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/2.2/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'America/Denver'
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/
STATIC_URL = '/static/'
STATIC_ROOT = ''
My base html file:
<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<html lang="en">
<head>
{% block title %}<title>Garden Dash</title>{% endblock %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% load static %}
<link rel='stylesheet' href="{% static 'wx/css/styles.css' %}">
</head>
<body>
<div class="container-fluid">
<div class="nav">
<ul>
<li>Plants</li>
<li>Weather</li>
<li>Soil</li>
<li>Yield</li>
</ul>
</div>
<div class="row">
<div class="col-sm-10">{% block content %}{% endblock %}</div>
</div>
</div>
</body>
</html>
My folder structure is as follows:
gardendash > wx > static > wx > css > styles.css
and my style sheet is simply,
html {
background-color: black;
}
I searched through stack overflow and found a couple solutions but they didn't fix the issue. I also found one that said to type the following to find my static location
python manage.py findstatic --verbosity 2 css/style.css
the result I am receiving is
No matching file found for 'css/style.css'.
Looking in the following locations:
/home/my_name/.virtualenvs/django/lib/python3.6/site-packages/django/contrib/admin/static
Any suggestions as to what I am doing wrong? I have tried adjusting the root url in settings.py to the folder directory as well but no luck.
Thank you all for your time.
You mention that the structure of your project is like this:
project_folder > app > static > app_name > css > styles.css
Since styles.css is inside your app's static directory, you can't simply access this file as /static/css/styles.css. This is the wrong path.
The correct path is this: /static/app_name/css/styles.css.
So, in your template you'd access your file like this:
{% static 'app_name/css/styles.css' %}
Also, make sure the app is listed in INSTALLED_APPS.
Additionally, let me clarify a few things:
STATIC_ROOT: This is the name of the directory where django will keep all the static files when you run manage.py collectstatic command. This is only required in production, otherwise this directory will and should be empty. The collectstatic command copies all static files from your apps and from your project.
STATIC_URL: This is the url prefix that django uses to generate url paths for static files. If STATIC_URL is set to /static/, django will convert {% static 'file.jpg' %} to /static/file.jpg.
STATICFILES_DIRS: This is a list containing paths to directories where you've kept your project specific static files. This is only required for development. When you run collectstatic command, Django will copy files from all the listed paths in this list and place them in the STATIC_ROOT.
You don't need to configure any url to serve static files because django does that by default during development as long as django.contrib.staticfiles is in your INSTALLED_APPS.
I've solved a similar issue by following steps:
Add the following line of codes inside settings.py
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static_root'),
)
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
Then create a folder named static_root inside my project folder, and insert there my custom stylesheet or scripts.
Run the following command in my console:
python3 manage.py collectstatic
I am using python3 on Ubuntu, If you are a windows user the command will be python manage.py collectstatic
Then all the static files that I saved inside static_root folder, and other necessary static files from the project, all files will be automatically generated inside the static folder.
Now inside my base HTML file add {% load static %}:
Here is the Example:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- custom css -->
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<title>Django Project</title>
</head>