CSS файлы не найдены при попытке импортировать сторонний NPM CSS файл в django

Я запускаю приложение django и хочу импортировать стороннюю таблицу стилей из моих node_modules. Но мое приложение django ищет не в той директории и выдает ошибку 404, и я не понимаю, почему.

Моя структура статических файлов:

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


В моем example.css я делаю следующее:

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

Это должно импортировать мой leaflet CSS - ~ представляет собой путь к модулям узла - который находится в моем каталоге node_modules в корневом каталоге (я также попробовал абсолютный путь к node_modules и возникла та же ошибка).

Я добавил node_nodules в STATIC_DIRS в конфиге django, и мои настройки статических файлов выглядят следующим образом:

STATIC_URL = "/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",
)

При такой настройке django должен искать node_modules и для статических файлов.

Теперь, с вышеуказанными настройками, когда я включаю мой example.css в голову моего шаблона, я получаю следующую ошибку:

ПОЛУЧИТЬ http://localhost:8000/static/src/outputs/~leaflet/dist/leaflet.css net::ERR_ABORTED 404 (Not Found)

>

Очевидно, что мое приложение находится в неправильной директории, так как оно должно находиться в node_modules/leaflet/dist/leaflet.css. Я не знаю, где подправить настройки, чтобы сделать это правильно. Я могу предположить, что проблема в том, что у меня не STATIC_ROOT, а STATIC_URL установлен в static? Кроме этого, я немного запутался. За помощь буду очень признателен. Спасибо!

Вы уверены

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

Не должно быть

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

Я думаю, что вам нужно включить /, чтобы это читалось как:

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

Обычно ~/ означает запуск из домашнего каталога. ~ - это ярлык для домашнего каталога

Вернуться на верх