What is the correct way to load static CSS files using npm and Django?

Question

I want to load my static css files (e.g. Bootstrap) from my node_modules directory, for example:

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

When I put .../node_modules/ in the STATICFILES_DIRS setting, this works. However, it also adds a huge number of files to my /static/ folder - mostly devDependencies , for which I don't need access to the interface.

What is the best practice of including certain static assets through npm but not including everything from node_modules in my /static/ folder?

Or is it good to include so many extraneous files and what is the best solution?

Answer 1

I do the following:

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

Only the necessary files will be placed in my static folder.

Answer 2

I personally believe that all these extraneous developer files live in node_modules (and are duplicated in STATIC_ROOT). Your mileage may differ if your node_modules folder is gigantic, but doubling the size is usually not a big problem for my use cases, and it’s more convenient not to specify each module in STATICFILES_DIRS when I install them.

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

Then in your templates do:

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

If a folder ever got out of hand in size, if you ran into conflicts or if there was a library that you really didn't want to serve, then a Jostcrow answer (or writing a custom static search file) might make sense.

Also, it might be worth a look at trying to put everything together. If all your stuff is bundled with JS / CSS files, the whole problem is solved simply by web-loading these files into your application of choice.

Answer 3

In order not to import a lot of unused files into a static folder, I copy the necessary items using the Gulp script. I use the NPM script to invoke Gulp after installing the packages, so it does not affect my daily workflow.

package.json :

 { "dependencies": { "bootstrap": "^4.3.1", "gulp": "^4.0.2", "jquery": "^3.4.1" }, "scripts": { "install": "gulp" } } 

gulpfile.js

 const { series, src, dest } = require('gulp'); // Task 1: copy bootstap assets to /_vendor/ function bootstrap() { const files = [ 'node_modules/bootstrap/dist/css/bootstrap.min.css', 'node_modules/bootstrap/dist/js/bootstrap.min.js' ] return src(files).pipe(dest('_vendor')) } // Task 2: copy jquery assets to /_vendor/ function jquery() { const files = [ 'node_modules/jquery/dist/jquery.min.js' ] return src(files).pipe(dest('_vendor')) } exports.default = series(bootstrap, jquery) 

my_project/settings.py :

 STATICFILES_DIRS = [ str(BASE_DIR / '_vendor'), # populated by gulp ] 

Django Template:

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

Bonus 🎉

In Gulpfile, you can combine and minimize files. For example, here is my Gulpfile file upload library for Blueimp:

 const uglify = require('gulp-uglify'); const concat = require('gulp-concat'); // Task 3: minify blueimp assets and save to /_vendor/ function blueimp() { const files = [ 'node_modules/blueimp-file-upload/js/vendor/jquery.ui.widget.js', 'node_modules/blueimp-file-upload/js/jquery.iframe-transport.js', 'node_modules/blueimp-file-upload/js/jquery.fileupload.js' ] return src(files).pipe(uglify()) .pipe(concat('jquery.fileupload.min.js')) .pipe(dest('_vendor/')) }