2015-11-02 15 views
6

Ich mag meine statischen CSS-Dateien (zum Beispiel Bootstrap) von meinem node_modules Verzeichnis laden, etwa so:Wie kann man statische CSS-Dateien mit npm und Django korrekt laden?

{% load staticfiles %} 
<link rel="stylesheet" href="{% static 'bootstrap/dist/css/bootstrap.min.css' %}" /> 

Als ich setzte .../node_modules/ in meiner STATICFILES_DIRS Einstellung, das funktioniert. Allerdings fügt es auch eine absolut massive Anzahl von Dateien zu meinem /static/ Ordner hinzu - meistens devDependencies, auf die ich am Frontend keinen Zugriff benötige.

Was ist die beste Methode für die Aufnahme bestimmter statischer Assets über npm, aber nicht alles von node_modules in meinem /static/ Ordner?

Oder ist es in Ordnung, so viele überflüssige Dateien aufzunehmen, und das ist die beste Lösung?

Antwort

0

Was ich tue, ist die folgende,

STATICFILES_DIRS = (
    os.path.join(DJANGO_PROJECT_DIR, 'static'), 
    os.path.join(ROOT_DIR, 'node_modules', 'd3', 'build'), 
    os.path.join(ROOT_DIR, 'node_modules', 'c3'), 
) 

Dies legen Sie nur die benötigten Dateien in meinem statischen Ordner.

+0

danke - so können Sie hier Dateipfade hinzufügen. Ich hätte erwartet, dass dies 'OSError: [Errno 20] Not a directory' in der' listdir' Methode des Speichers hier anhebt (https://github.com/django/django/blob/967be82443b5640d61608a89897d8ce2bc44fa54/django/core/files) /storage.py#L397). Was ist deine 'STATICFILES_STORAGE' Einstellung? Wie fügen Sie diese in Ihrer Vorlage hinzu? – YPCrumble

+0

Entschuldigung, ich habe tatsächlich einen Fehler gemacht. Ich werde die Antwort verbessern. Ich sollte die Dateien nicht laden – Jostcrow

+0

Ich sehe - aber Sie brauchen auch eine separate Zeile für jede Datei in Ihrer Vorlage? – YPCrumble

0

Ich persönlich denke, es ist in Ordnung, diese externen Dev-Dateien in node_modules leben (und in STATIC_ROOT dupliziert). Ihre Laufleistung kann variieren, wenn Ihr Ordner "node_modules" gigantisch ist, aber eine Verdopplung der Größe ist normalerweise keine große Sache für meine Anwendungsfälle, und es ist praktisch, nicht jedes Modul in STATICFILES_DIRS aufzulisten, wenn ich sie installiere.

STATICFILES_DIRS = (
    ... 
    os.path.join(BASE_DIR, 'node_modules'), 
    ... 
) 

dann in Ihren Vorlagen tun:

<script src='{% static 'bootstrap/dist/css/bootstrap.min.css' %}'></script> 

Wenn der Ordner immer aus der Hand Größe her hat, wenn Sie Konflikte gestartet begegnen, oder wenn es eine Bibliothek ist man wirklich didn‘ Wenn Sie wollen, könnte Jostcrows Antwort (oder das Schreiben eines benutzerdefinierten statischen Dateifinders) Sinn machen.

Auch könnte es sich lohnen, zu versuchen, alles zusammen zu bündeln. Wenn all dein Zeug in gebündelten JS/CSS-Dateien lebt, wird das ganze Problem dadurch gelöst, dass du diese Dateien einfach in die App deiner Wahl einpackst.