npmとDjangoを使用してCSSスタティックファイルをロードする正しい方法は何ですか？

Question

私はそうのように、私のnode_modulesディレクトリからの私の静的なCSSファイル（例えば、ブートストラップ）をロードしたい：私は私のSTATICFILES_DIRS設定で.../node_modules/を置くとき

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

、これは動作します。しかし、それはまた私の/static/フォルダーに大量のファイルを大量に追加します - ほとんどはフロントエンドでアクセスする必要はないdevDependenciesです。

特定の静的資産をnpm経由で含めるのにはベストプラクティスはありますが、フォルダにnode_modulesのすべてを含めることはできません。

または、無関係なファイルをたくさん含むとうれしいですが、それが最適な解決策ですか？私は何

Answer 1

は次のようにこれは私の静的フォルダ内にのみ必要なファイルを配置します、

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

です。

Answer 2

個人的には、これらの無関係のdevファイルをnode_modulesに入れて（そしてSTATIC_ROOTにコピーして）よいと思います。あなたのnode_modulesフォルダが巨大で、サイズを倍増させるのは通常私の使用例では大したことではなく、STATICFILES_DIRSに各モジュールをインストールする必要はありません。

あなたのテンプレートで次に

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

は、実行します。

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

フォルダが今まで手の出なかった場合はサイズ面では、あなたが競合に遭遇開始した場合、またはあなたが本当にdidnのライブラリがあった場合は、」 Jostcrowの答え（またはカスタムstaticfilesファインダーの作成）は意味をなさないでしょう。

さらに、すべてを一緒にバンドルしようと考えてみる価値があるかもしれません。あなたのすべてのものがバンドルされたJS/CSSファイルに入っている場合、それらのファイルを選択したアプリにwebpackingするだけで問題は解決します。