404 (Not Found) for CSS files

Question

I am running a django app and I want to import a third-party stylesheet from my node_modules. But my django app is looking in the wrong directory and throws a 404 and I don't understand why.

My structure of the static files:

static
├── src
│   |
│   │   
│   ├── outputs
│   │   ├── example.css
│   │   ├── ..
│   │   ├── ..
│   │   ├── ..
│   │   └── ..

In my example.css I do the following:

@import "~leaflet/dist/leaflet.css";

This should import my leaflet CSS - the ~ represents the path to the node modules- which is in my node_modules directory in my root directory (I also tried the absolute path to node_modules and the same error occurs).

I added the node_nodules to the STATIC_DIRS in the django config and my static file settings look like so:

STATIC_URL = "/static/"
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "myproject/static"),
    os.path.join(BASE_DIR, "node_modules"),
]

STATICFILES_FINDERS = (
    "django.contrib.staticfiles.finders.FileSystemFinder",
    "django.contrib.staticfiles.finders.AppDirectoriesFinder",
)

With this setting django should look into node_modules for the static files too.

Now, with the above settings, when I include my example.css into the head of my template I get the following error:

GET http://localhost:8000/static/src/outputs/~leaflet/dist/leaflet.css net::ERR_ABORTED 404 (Not Found)

So obviously my app looks in the wrong directory, since it should look in node_modules/leaflet/dist/leaflet.css. I don't know where to tweak the settings to get this right. I could imagine that the problem is maybe that I don't have a STATIC_ROOT but a STATIC_URL set to static? Apart from that I'm a bit lost. Help is very much appreciated. Thanks!

Answer 1

Are you sure

@import "~leaflet/dist/leaflet.css";

Shouldn`t be

@import "~/leaflet/dist/leaflet.css";

Answer 2

I think you need to include a / so that it reads as:

@import "~/leaflet/dist/leaflet.css";

Generally ~/ means to start from the home dir. ~ is a shortcut for the home directory