Need to serve GOV.UK Frontend assets from separate folder

[zackads]

We may need to use MCA / Beacons-specific assets in the future. These should be segregated from imported GOV.UK Frontend assets (from the node package).

On 27 Jan, @matthew-a-carr and @zackads attempted to use the $govuk-assets-path SASS variable to set the GOV.UK assets to be served from public/assets/govuk/ rather than public/assets/.

This was unsuccessful: even though we set the $govuk-assets-path the frontend was still requesting the assets from the /assets path.

Resources

• https://frontend.design-system.service.gov.uk/importing-css-assets-and-javascript/#font-and-image-assets
• https://stackoverflow.com/questions/60951575/next-js-using-sass-variables-from-global-scss

[zackads]

Did some more work on this, unsuccessfully. Learned that the variable has to be before the govuk package styles are imported in order to be set:

@import "~@csstools/normalize.css";

$govuk-assets-path: "public/assets/govuk/";

@import "~govuk-frontend/govuk/all";

Trying to find assets in that directory then occurs, but with errors:

error - ./src/styles/globals.scss ((webpack)/css-loader/cjs.js??ref--5-oneOf-7-1!(webpack)/postcss-loader/cjs.js??ref--5-oneOf-7-2!(webpack)/resolve-url-loader??ref--5-oneOf-7-3!(webpack)/sass-loader/cjs.js??ref--5-oneOf-7-4!./src/styles/globals.scss)
Error: Can't resolve '../../node_modules/public/assets/govuk/images/govuk-crest.png' in '/Users/zackadlington/src/mca-beacons-webapp/src/styles'

Suspect it's due to the Webpack entry point being set somewhere, so whatever value is set by $govuk-assets-path is appended to '../../node_modules/'.