Add govuk frontend loading with scss and npm

[252afh]

Context

Adding govuk frontend loading in the style Duncan implemented

Changes proposed in this pull request

Guidance to review

Check the app loads and the govuk styling is in place

Relevant links

Things to check

• I have added any new ENV vars in all deployed environments
• I have tested any code added or changed

[lmwilkigov]

@duncanjbrown, any thoughts on the compression error in the build here?

[duncanjbrown]

This is down to a nuance of docker-compose: when you mount a local volume in the docker-compose.yml its contents will shadow whatever was built in the build step.

The fix is to make sure this isn't touched is to mount a persistent volume on the node_modules folder

    volumes:
      - ./:/app/:z
      - /app/django_app/frontend/node_modules

then correct the path in style.scss, which needs to be relative to /app as the container runs in the context .:

@import "django_app/frontend/node_modules/govuk-frontend/dist/govuk/all";

and you need to correct the Dockerfile to this so that the node_modules folder is copied and not its contents:

COPY --from=node_modules /app/node_modules /app/django_app/frontend/node_modules

You can confirm it's built correctly with

docker-compose run -it django-app bash -c "ls django_app/frontend/node_modules" 

and you should see govuk-frontend

Further reading: https://stackoverflow.com/questions/29181032/add-a-volume-to-docker-but-exclude-a-sub-folder