3

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!

shadow
  • 151
  • 2
  • 12
  • Added the static root, but still no success – shadow May 10 '22 at 20:59
  • did you execute `python manage.py collectstatic`? – Egor Wexler May 12 '22 at 10:11
  • Thanks for the reply. Well, should I? If I import the leaflet CSS into my CSS shouldn't it just take the CSS from there? When I run `collectstatic` it also imports all the node modules into the static folder – shadow May 12 '22 at 20:03
  • when staticfiles are served - the path of the target staticfile (in filesystem) equals to URL path to that file. Thus such thing as `outputs/~leaflet` cannot be resolved. But what `collectstatic` does - it collects all dependencies into the target folder to be able to serve it. So my assumption that it may help – Egor Wexler May 13 '22 at 05:09
  • Thank you, I will try and report if it worked! Maybe you can help me understand this though: If instead of the CSS file in a JS file I do for example `import "leaflet";` then it imports the JavaScript without any problems from the `node_modules` without running `collectstatic`. But for the CSS it does not work that way, which strikes me as odd, since the JS files should behave similar as they are also static files.... – shadow May 13 '22 at 18:41
  • I am not an expert in that field but can assume that it's because of different import mechanism between `css` and `js`. `import` in `js` works because there is `export` in other file. I.e. other file available in that namespace and served separately. And in `css` this dependency resolved in more "direct" way - to serve it just tries to get the given path relative to the particular file – Egor Wexler May 14 '22 at 05:50
  • take a look at this: https://stackoverflow.com/questions/63552207/how-to-use-node-modules-with-django – MoFarid May 14 '22 at 16:17

2 Answers2

3

Are you sure

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

Shouldn`t be

@import "~/leaflet/dist/leaflet.css";
ymz
  • 6,602
  • 1
  • 20
  • 39
3

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

DeltaRage
  • 119
  • 1
  • 3
  • 16