0

I am working through the Frobshop sample project for django-oscar.

The django-oscar documentation is rather terse regarding customizing assets, and the unresolved bug I reported for manage.py oscar_fork_statics just adds to the confusion. This is my (failed) attempt at copying files manually and compiling the assets.

I installed Frobshop in /var/work/django/frobshop/.

I installed a virtual environment for django-oscar in /var/work/django/oscar/, so the asset directory for the distribution is found within that directory, in lib/python3.8/site-packages/oscar/static/oscar/. The README.rst file in that directory said When building your own project, it is not recommended to use these files straight from the package. Rather, you should take a static copy of the ``oscar/static/oscar`` folder and commit it into your project.

Seemed straightforward, so I typed:

$ cd /var/work/django
$ mkdir frobshop/frobshop/static/
$ cp -a lib/python3.8/site-packages/oscar/static/oscar/* frobshop/frobshop/static/

Next, README.rst said: You can compile the static assets from the root of the project using a make target: make assets.

$ make assets
make: *** No rule to make target 'assets'.  Stop.

Hmm, that did not work. Is https://github.com/django-oscar/django-oscar/blob/master/Makefile the proper Makefile, I wonder, and where should it be located?

$ wget -O frobshop/static/Makefile \
  https://raw.githubusercontent.com/django-oscar/django-oscar/master/Makefile

Running make assets gave me an error message complaining about a missing package.json, so I grabbed it from django-oscar also.

$ wget -O frobshop/static/package.json \
  https://raw.githubusercontent.com/django-oscar/django-oscar/master/package.json

Seemed like I should run make from the new frobshop/frobshop/static/ directory:

$ (cd frobshop/static/; make assets)

Many files were installed, then eventually this message appeared:

found 3 vulnerabilities (2 moderate, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details
npm run build

> django-oscar@3.0.0 build /var/work/django/frobshopCamille/frobshop/static
> gulp copy && gulp scss

[11:32:39] No gulpfile found
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! django-oscar@3.0.0 build: `gulp copy && gulp scss`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the django-oscar@3.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/mslinn/.npm/_logs/2021-02-19T16_32_39_097Z-debug.log
make: *** [Makefile:29: assets] Error 1

I do not know what to do with that error. I see a directory in django-oscar called gulpfile.js. Should I copy that somewhere also?

README.rst went on to say: If you make changes to Oscar's assets in development, you can run ``npm run watch`` to automatically watch and compile changes to them.

$ (cd frobshop/static/; npm run watch)

Of course, that just yields the same error message as before.

Mike Slinn
  • 7,705
  • 5
  • 51
  • 85

1 Answers1

1

The instructions for compiling assets (using make assets, which runs Gulp tasks) mentioned in src/oscar/static_src/oscar/README.rst are actually only meant for when developing/packaging django-oscar itself. We will try to make the documentation more clear.

For a project/shop based on django-oscar, you only need to run ./manage.py collectstatic, to use Oscar's static files without modification, as mentioned here: https://django-oscar.readthedocs.io/en/latest/howto/how_to_handle_statics.html#customising-statics

To modify and override Oscar's static files, you in addition need to run ./manage.py oscar_fork_statics, to copy Oscar's static files into your project. The command is currently broken, but we are working on a fix: https://github.com/django-oscar/django-oscar/pull/3657

Joseph Wayodi
  • 76
  • 1
  • How would I manually copy and override Oscar's static files into my project today, without trying to use the broken `./manage.py oscar_fork_statics`? – Mike Slinn Feb 22 '21 at 15:17
  • When I make a change to an SCSS file it is not reflected on the rendered page, even after a reload. Some framework (like Jekyll) rebuild SCSS automagically. How would I make changes to SCSS visible? – Mike Slinn Feb 22 '21 at 18:44
  • 1
    @MikeSlinn To manually copy the Oscar static files, just: `$ cp -a lib/python3.8/site-packages/oscar/static/* frobshop/static/`. And then add `/var/work/django/frobshop/static/` to your `STATICFILES_DIRS` [setting](https://docs.djangoproject.com/en/3.1/ref/settings/#std:setting-STATICFILES_DIRS). The fix for `oscar_fork_statics` is now in the `master` branch: https://github.com/django-oscar/django-oscar/commit/735db42436df172460ef65139e470bc6860ee60b. – Joseph Wayodi Feb 23 '21 at 08:08
  • 1
    @MikeSlinn Oscar builds `oscar/css/styles.css` and `oscar/css/dashboard.css` (which it actually uses) from the SCSS files using [Gulp](https://github.com/django-oscar/django-oscar/blob/master/gulpfile.js). If you want to modify the SCSS files, you will need to set up such building infrastructure for your project. If you'd like to use Gulp, you can look at how Oscar itself does it: https://github.com/django-oscar/django-oscar/blob/master/gulpfile.js. There's even a task in there that watches for changes in the SCSS files, and rebuilds the CSS automatically. – Joseph Wayodi Feb 23 '21 at 08:17