django to find static css files for my HTML page

Question

I'm trying to reach some of my css files but I can't seem to get the directory right.

For example I have a link in my home.html:

<link href="assets/plugins/revo-slider/css/settings.css" rel="stylesheet" type="text/css"/>

I've converted it to:

<link href="{% 'assets/plugins/revo-slider/css/settings.css' %}" rel="stylesheet" type="text/css"/>

But that's the incorrect directory because I recently moved the file to where it is now as shown below.

my folder structure is as follows:

project/
├────── Index/
│        ├──_static/
│        │  ├── css/ (.css files)
│        │  ├── js/ (javascript files)
│        │  ├── img/ (images files)
│        │  ├── media/ (video files)
│        │  └── plugins/ (.css plugin files)   
│        │               
│        └── templates/
│           └── index/
│                ├── home.html
│                └── about.html
├── manage.py
└── project folder with settings.py,url.py

my settings.py includes:

line 5: BASE_DIR = Path(__file__).resolve().parent.parent

line 90: STATICFILES_DIRS = [
    "/index/static",
]

I've checked the similar questions and youtube tutorials but I've seen some which suggested I add:

os.path.join(BASE_DIR, 'static')

in line 91 but i've seen conflicting codes through Youtube tutorials, first step is getting the directory right in my html though, if anyone can help it'd be great

have you loaded the static before using it {% load static %} ?? — Anonymous Coder
– Anonymous Coder, Commented Jul 18, 2021 at 8:59
@AnonymousCoder Yes, I've gotten it to work the problem was something else but thank you — LearningTheCurb
– LearningTheCurb, Commented Jul 18, 2021 at 9:02

Rehmat · Accepted Answer · 2021-07-18 11:37:51Z

First of all, don't specify your static files directory (in line 90 in your case). If you use the name static for your directories, Django automatically discovers them. You can get rid of that entire line. Just be sure to use static name for your directories always.

For some reason if you want to specify your static directories, just use the directory name, don't specify the path. i.e.:

STATICFILES_DIRS = [
    "/index/static",
]

should be:

STATICFILES_DIRS = [
    "static",
]

Secondly, you should always namespace your static file directories. For example, in the static directory of each app, first, create a directory with the same name as the app name and keep your static files in there. This will let you use different static files even with the same names without any conflicts. Here is my suggested structure.

.
├── manage.py
├── my_app
│   └── static
│       └── my_app
│           ├── css
│           │   └── style.css
│           └── js
│               └── script.js
├── project
│   └── settings.py
└── static

And in your templates, you can use static files like this:

<link rel="stylesheet" href="{% static 'my_app/css/style.css' %}">

In development, Django will automatically discover your static files. And before pushing the project live in production, run python manage.py collectstatic and your static assets will be copied to the static directory in the project root. To make this work, you need to specify the static root path so Django will copy static assets from each app to the root static directory. Add this to your settings.py file:

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

This is what I always do. I find this to be a cleaner way to manage static assets as each of your apps can have independent static files and by namespacing your static directories, you will be able to avoid conflicts.

LearningTheCurb · Accepted Answer · 2021-07-18 09:01:10Z

0

Okay I've figured it out, I just removed the 'assets' tag from the directory link but can someone double check I have the correct code in my STATICFILES_DIRS please, I've seen conflicting answers I have the latest version of django

answered Jul 18, 2021 at 9:01

LearningTheCurb

355 bronze badges

Collectives™ on Stack Overflow

django to find static css files for my HTML page

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related