使用npm和Django加载CSS静态文件的正确方法是什么?
问题描述:
我想从我的node_modules目录载入我的静态CSS文件(例如,引导),像这样:使用npm和Django加载CSS静态文件的正确方法是什么?
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'bootstrap/dist/css/bootstrap.min.css' %}" />
当我把.../node_modules/
我STATICFILES_DIRS
设置,这个工程。但是,它也为我的/static/
文件夹添加了大量文件 - 主要是devDependencies
,我不需要在前端访问它。
通过npm包含某些静态资产的最佳做法是什么,但不包括node_modules
在我的/static/
文件夹中的所有内容?
或者,包含如此多的无关文件并且这是最好的解决方案吗?
答
我要做的就是以下,
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'),
)
这将仅放置所需的文件在我的静态文件夹中。
答
我个人认为将这些无关的开发文件生存在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>
如果文件夹做过不可收拾的大小,明智的,如果你开始遇到冲突,或者如果有你真的没库”要想服务,Jostcrow的答案(或写一个自定义的静态文件查找程序)可能是有道理的。
此外,可能值得考虑尝试将所有内容捆绑在一起。如果你的所有东西都存在于捆绑的JS/CSS文件中,那么只需将这些文件打包到你选择的应用程序中即可解决整个问题。
谢谢 - 所以你可以在这里添加文件路径。我希望这会引发'OSError:[Errno 20] [存储的'listdir'方法中不是目录](https://github.com/django/django/blob/967be82443b5640d61608a89897d8ce2bc44fa54/django/core/files /storage.py#L397)。你的STATICFILES_STORAGE设置是什么?另外你如何添加这些在你的模板? – YPCrumble
对不起,我确实犯了一个错误。我会改进答案。我不应该加载文件 – Jostcrow
我看到 - 但那么你需要为你的模板中的每个文件单独一行?据我所知, – YPCrumble