docs.css overrides my custom CSS

[GrilloPress]

Everything inside the app folder inherits from the layout file inside the docs folder.

However, this means that if you try and write some override SCSS in the main.scss file it will be overwritten by the docs folder.

Discovered this implementing the NDOP service and exploring an IA issue

// docs/views/layouts/layout.html
{% block headCSS %}
  <link href="/css/main.css" rel="stylesheet">
  <link href="/css/prism.css" rel="stylesheet">
  <link href="/css/docs.css" rel="stylesheet">
{% endblock %}

The doc.scss file imports the frontend library again meaning any exploration of a new component or adjustment is overridden.

options...

1. Change the order of this declaration.
2. Remove the import for the library inside the docs.scss file (knock-on issues here)
3. Returning a layout file to the app folder
4. Adding the headCSS block into the layout-nhsuk.html and layout-transactional.html layout file that cuts out the docs css etc.

I'm sure there are plenty of other ways to do it too.

I'd take option 4 though I appreciate it is a bit of a violation of the DRY principle