Error Message: "Django Unable to Locate Global Static Files"

I am currently working on setting up a global CSS file for my project, and although it seems to be correctly referenced in the location, the file itself cannot be found.

The relevant part of my settings.py file looks like this:

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_ROOT = os.path.join(BASE_DIR, 'abcdefg')
STATIC_URL = '/static/'
STATICFILES_DIR = [
     os.path.join(BASE_DIR, 'static')
]

Additionally, I have django.contrib.staticfiles included in my installed apps list.

This is the current structure of my files:

Project/
├── abcdefg/
│   ├── admin/
│   ├── App/
├── Project/
│   ├── __init__.py
│   ├── settings/
│   ├── urls.py
│   └── wsgi.py
├── App/
│   └── static
│       └── App
│           └── css
│               └── test.css
│   └── __init__.py
│   └── admin.py
│   └── apps.py
│   └── models.py
│   └── views.py
│
├── manage.py
│
├── static/
│   └── base
|       └── css
|           └── test.css
└── templates/
    └── base.html

The current content of my base.html file is as follows:

{% load static %}

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="{% static 'base/css/global.css' %}">
  <title>Title {% block title %}{% endblock %}</title>
</head>
<body>
{% block content %}
  <h1>Test</h1>
{% endblock %}
</body>
</html>

Every time I try to access the page, I receive an error message stating:

[08/Feb/2020 11:26:50] "GET /static/base/css/test.css HTTP/1.1" 404 1683
This error indicates that the link is correct, but the actual file is not being retrieved. Interestingly, changing the link href in base.html to {% static 'App/css/test.css %} resolves the issue.

I've attempted to rectify by specifying a location mapped to STATIC_ROOT and running python manage.py collectstatic without success.

It feels like I might be missing something simple, so I went through the documentation and followed a video tutorial meticulously (you can watch it here), yet I'm still unable to import the global file successfully.

All relevant files have been uploaded to GitHub at https://github.com/JVP3122/django_help, just to provide a comprehensive overview. Also, note that this repository is not the official project repo, hence the visibility of Django secret key does not pose a security risk.

Answer №1

Remember to use STATICFILES_DIRS instead of STATICFILES_DIR. Additionally, make sure STATIC_ROOT is directed to a separate folder to avoid overriding global static files. Create a directory named 'static_files' in the main project folder and update these 2 lines:

STATIC_ROOT = os.path.join(BASE_DIR, 'static_files')
STATICFILES_DIRS = [
    ('global', os.path.join(BASE_DIR, 'static')),
]

After these changes, you can access the global file at: {% static 'global/base/css/test.css' %}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to extract user input from a web form and utilize it to perform a calculation using jQuery?

Is it possible to retrieve user input from a web form and use it to perform calculations with jquery? I am interested in extracting a numerical value entered by a user in a web form. Upon clicking "NEXT", I intend to multiply this number by a predefined c ...

Control the playback of individual HTML5 audio elements using jQuery for seamless user experience

How can I modify the code to ensure that only one HTML5 audio element plays at a time? Currently, all tracks are able to play simultaneously. I am using jQuery for play and pause functionalities. If one track is playing and another is clicked on, how can ...

Adjust the content within an HTML div by utilizing AngularJS

Snippet of AngularJs code to display different content based on selection: <select> <option value="0">--Select--</option> <option value="1">Individual</option> <option value="2"> ...

Can anyone provide guidance on how to display all the value= options within an HTML (aspx) page?

I'm currently working with a .NET website that utilizes multiple webforms. Users input their data through a browser, and the submitted information is stored in a SQL Server database. However, I'm facing difficulty analyzing the data because ther ...

Is it the correct method to retrieve an object from the database for editing within the same form, and subsequently save the updated values for the same object using Django?

This is the code snippet I am currently working with: For creating a new issue object, utilize the form below def raise_new_issue(request, *args, **kwargs): form = RaiseIssueForm(request.POST or None) if form.is_valid(): form.save() ...

Ways to display one element while concealing it when another is clicked

I am utilizing a series of div elements that can be triggered with the following code snippet: $(".course_id").on("click", function(){ var id = $(this).data("id"); $("div#lessons_by_course_" + id).removeClass("hidden"); }); The ...

The issue arises when I try to retrieve information from MySQL using Ajax, as it appears

I am currently working on developing an ecommerce website. In order to display products, I am fetching data from a database. My goal is to allow users to add products to their cart without having to refresh the page. I have attempted to use AJAX for this ...

The opacity attribute in CSS is not producing the desired outcome

After numerous attempts, I have yet to successfully create the desired effect on the screen I am currently working on: https://i.sstatic.net/BonQa.png My goal is to achieve a transparent effect using a gradient as a background, but so far my efforts have ...

Certain CSS classes are functioning properly, while others are not operating as expected

I am in the process of developing an ASP.Net page and utilizing Bootstrap, which has been functioning properly. Additionally, I have integrated a custom stylesheet to refine the appearance of the page. However, within the last couple of days, any new class ...

Encountered a KeyError when trying to render: 'opts' in the admin interface

As I embarked on creating a personalized admin view with a custom template, my approach involved constructing a template that extended the pre-existing change_form.html template. I meticulously crafted the form, view, and corresponding URL for this purpose ...

JavaScript - Image style alterations are not operating as expected

Let me break it down for you: onmouseover="imageOn(bg-index);" onmouseout="imageOff(bg-index);" I've got these two attributes set on a table tagged with ID table-title. These functions are included in an external JS file: If the name is 'bg-i ...

Aligning a table at the center of another table

Frustration has been brewing within me all week as I grapple with the task of sending out an important emailer soon. The challenge lies in aligning these product images next to their descriptions at the center, a feat that seems impossible to achieve withi ...

Transform CSS Selector into XPATH

Recently, I came across an interesting article about mapping CSS selectors to XPATH queries. Now, I'm on the lookout for any .NET libraries that can help with this mapping or conversion process. If you have any recommendations or suggestions on how to ...

Patch method is missing when using corsheaders, but this issue only occurs on the

My Django application is utilizing the corsheaders package in settings.py as shown below: INSTALLED_APPS = [ ..., corsheaders, ...] ... MIDDLEWARE = [ # on top "corsheaders.middleware.CorsMiddleware", "django.middleware.common.Co ...

Steps to extract the data from a submitted HTML form and save it into a nested document within a Mongoose schema

Mongoose Schema for Contact Information: const addressSchema = new Schema({ street: { type: String, trim: true }, state: { type: String, trim: true , match: [/^[a-zA-Z]{2,}/, 'Please Enter State in a Correct Format']}, zip: {type: Nu ...

Is it possible for me to utilize a validation function to display error messages within a specific span id tag?

document.getElementById("button1").addEventListener("click", mouseOver1); function mouseOver1(){ document.getElementById("button1").style.color = "red"; } document.getElementById("button2").addEventListener("click", mouseOver); function mous ...

What is the correct way to implement ::v-deep(<inner-selector>) in a Vue component?

I am attempting to assign an existing style class to a child element that will be loaded using the v-html directive. Since /deep/ and >>> are no longer supported, I have tried using ::v-deep in Vue. <template> <div v-else v-html="chi ...

What is the right height and width to use in CSS?

I find it challenging to decide when to use rem, em, px, or % in web design. Although I know the definitions of each unit, I struggle with knowing the appropriate situations to utilize them. What guidelines should I follow to determine which one to use? ...

Typing text into a dynamic span element using Selenium's send_keys function

I am currently utilizing selenium to modify the Yoast SEO meta description of a post within WordPress. Despite my efforts, I have been unsuccessful in getting this to function properly. Below is the code for the text box when there is no text present: &l ...

Tips for utilizing the output of a pre-defined function within another function in SASS

How can I effectively utilize the outcome of darken( $var, 10% ) in the SASS function oppositeColor( $darkenedColor )? The code I am working with currently looks like this: $color1: #000000 !default; $color2: darken( $color1, 5% ) !default; $color3: oppos ...