Make sass errors clearer to the user

[joelanman]

to fix issue #295

• changes the Gulp log level to be quieter so errors stand out
• makes a blank application.css file if there are sass errors so the site looks broken to the user (simply removing the css file does not work with browserSync)
• if the user fixes the sass error, the site will automatically reload, as opposed to Make sass errors stop Gulp to make them clearer #977 which crashes and you have to restart the kit after fixing the sass

[joelanman]

the output now looks like this:

GDS3941:govuk-prototype-kit joelanman$ npm start

> govuk-prototype-kit@9.12.1 start
> node start.js


 app/assets/sass/application.scss
Error: @import directive requires a url or quoted path
        on line 19 of app/assets/sass/application.scss
        from line 3 of app/assets/sass/application-ie8.scss
>> @import bananas;

   ^
 

[16:42:21] [nodemon] 2.0.7
[16:42:21] [nodemon] to restart at any time, enter `rs`
[16:42:21] [nodemon] watching path(s): .env **/*.js **/*.json
[16:42:21] [nodemon] watching extensions: js,mjs,json
[16:42:21] [nodemon] starting `node listen-on-port.js`

GOV.UK Prototype Kit v9.12.1

NOTICE: the kit is for building prototypes, do not use it for production services.

Listening on port 3000   url: http://localhost:3000

[vanitabarrett]

Thanks for looking into this @joelanman ! This approach makes the most sense to me. It gives the user a clue that something has gone wrong with the sass even if they don't spot the error message first. It does feel a bit hacky that we have to do this in the first place, but I can't think of an alternative... I'd be interested in seeing what @36degrees and @hannalaakso think.

[hannalaakso]

Seems okay to me too. And we're limiting the impact of the changes to a specific action (when Sass compilation throws an error). Do we know if anyone from the community has had a chance to review this? It feels like the sort of thing that it would be good to run past a user to see if it makes sense to them.

[joelanman]

@hannalaakso great point, have now tested with 3 users and the fact the site looks broken when a sass error occurs is very clear to all. 1 participant didn't realise there was an error in the terminal, but I think we can look at adding guidance in the tutorial to check the terminal for errors in general.