2015-11-02 7 views
6

voglio caricare i miei file css statici (per esempio, Bootstrap) dal mio elenco node_modules, in questo modo:Qual è il modo corretto di caricare file statici CSS usando npm e Django?

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

Quando ho messo nel mio ambiente .../node_modules/STATICFILES_DIRS, questo funziona. Tuttavia, aggiunge anche un numero enorme di file alla mia cartella /static/ - per lo più devDependencies che non ho bisogno di accedere al frontend.

Qual è la procedura migliore per includere determinate risorse statiche tramite npm, ma non incluso tutto da node_modules nella mia cartella /static/?

Oppure, è bello includere così tanti file estranei e questa è la soluzione migliore?

risposta

0

Quello che faccio è la seguente,

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'), 
) 

Questo metterà solo i file necessari nella mia cartella statica.

+0

grazie - in questo modo è possibile aggiungere percorsi di file qui. Mi sarei aspettato che questo sollevasse 'OSError: [Errno 20] Not a directory' nel metodo [listdir' di archiviazione * qui] (https://github.com/django/django/blob/967be82443b5640d61608a89897d8ce2bc44fa54/django/core/files /storage.py#L397). Qual è la tua impostazione 'STATICFILES_STORAGE'? Inoltre, come li aggiungi nel tuo modello? – YPCrumble

+0

Mi dispiace, ho commesso un errore. Migliorerò la risposta. Non dovrei caricare i file – Jostcrow

+0

, ma ho bisogno di una riga separata per ogni file nel tuo modello? – YPCrumble

0

Personalmente penso che sia bello avere questi file dev estranei che vivono in node_modules (e duplicati in STATIC_ROOT). Il tuo chilometraggio può variare se la tua cartella node_modules è gigantesca, ma raddoppiare le dimensioni non è di solito un grosso problema per i miei casi d'uso, ed è conveniente non dover elencare ogni modulo in STATICFILES_DIRS durante l'installazione.

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

Poi nei modelli, fare:

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

Se la cartella mai fatto sfuggire di mano formato-saggio, se hai iniziato incontrando i conflitti, o se ci fosse una biblioteca davvero didn' Voglio servire, la risposta di Jostcrow (o la scrittura di un finder statico su misura) potrebbe avere senso.

Inoltre, potrebbe valere la pena cercare di raggruppare tutto insieme. Se tutte le tue cose sono contenute in file JS/CSS in bundle, l'intero problema viene risolto semplicemente con il Webpacking di questi file nella tua app preferita.