site: Bump gulp-sass from 4.0.2 to 5.1.0 (fixes #882)

[vorburger]

fixes #882

[vorburger]

fixes https://github.com/googlecodelabs/tools/issues/882

Wehl... not really, yet; it currently fails like this - how do we fix this:

$ ./node_modules/.bin/gulp serve
[02:18:09] Using gulpfile ~/git/github.com/googlecodelabs/tools/site/gulpfile.js
[02:18:09] Starting 'serve'...
[02:18:09] Starting 'build'...
[02:18:09] Starting 'clean'...
[02:18:09] Starting 'clean:build'...
[02:18:09] Starting 'clean:dist'...
[02:18:09] Finished 'clean:dist' after 5.99 ms
[02:18:09] Finished 'clean:build' after 9.38 ms
[02:18:09] Finished 'clean' after 10 ms
[02:18:09] Starting 'build:codelabs'...
[02:18:09] Finished 'build:codelabs' after 1.49 ms
[02:18:09] Starting 'build:css'...
[02:18:09] Finished 'build:css' after 22 ms
[02:18:09] Starting 'build:scss'...
[02:18:09] 'build:scss' errored after 252 ms
[02:18:09] Error in plugin "gulp-sass"
Message:
    app/styles/_categories.scss
Error: Expected identifier.
  ┌──> app/styles/_categories.scss
50│   %bg-#{$color} {
  │         ^^^^^^
  ╵
  ╷
1 │ %bg-#4285f4
  │      ━ error in interpolated output
  ╵
  app/styles/_categories.scss 50:9    codelab-card()
  app/styles/_categories.scss 79:1    @import
  app/styles/_codelab-card.scss 18:9  @import
  app/styles/main.scss 22:9           root stylesheet
Details:
    formatted: Error: Expected identifier.
  ┌──> app/styles/_categories.scss
50│   %bg-#{$color} {
  │         ^^^^^^
  ╵
  ╷
1 │ %bg-#4285f4
  │      ━ error in interpolated output
  ╵
  app/styles/_categories.scss 50:9    codelab-card()
  app/styles/_categories.scss 79:1    @import
  app/styles/_codelab-card.scss 18:9  @import
  app/styles/main.scss 22:9           root stylesheet
    line: 50
    column: 9
    file: /home/vorburger/git/github.com/googlecodelabs/tools/site/app/styles/_categories.scss
    status: 1
    messageFormatted: app/styles/_categories.scss
Error: Expected identifier.
  ┌──> app/styles/_categories.scss
50│   %bg-#{$color} {
  │         ^^^^^^
  ╵
  ╷
1 │ %bg-#4285f4
  │      ━ error in interpolated output
  ╵
  app/styles/_categories.scss 50:9    codelab-card()
  app/styles/_categories.scss 79:1    @import
  app/styles/_codelab-card.scss 18:9  @import
  app/styles/main.scss 22:9           root stylesheet
    messageOriginal: Expected identifier.
  ┌──> app/styles/_categories.scss
50│   %bg-#{$color} {
  │         ^^^^^^
  ╵
  ╷
1 │ %bg-#4285f4
  │      ━ error in interpolated output
  ╵
  app/styles/_categories.scss 50:9    codelab-card()
  app/styles/_categories.scss 79:1    @import
  app/styles/_codelab-card.scss 18:9  @import
  app/styles/main.scss 22:9           root stylesheet
    relativePath: app/styles/_categories.scss
    domainEmitter: [object Object]
    domainThrown: false

[02:18:09] 'build' errored after 288 ms
[02:18:09] 'serve' errored after 291 ms

[arielmagbanua]

fixes #882

Wehl... not really, yet; it currently fails like this - how do we fix this:

$ ./node_modules/.bin/gulp serve
[02:18:09] Using gulpfile ~/git/github.com/googlecodelabs/tools/site/gulpfile.js
[02:18:09] Starting 'serve'...
[02:18:09] Starting 'build'...
[02:18:09] Starting 'clean'...
[02:18:09] Starting 'clean:build'...
[02:18:09] Starting 'clean:dist'...
[02:18:09] Finished 'clean:dist' after 5.99 ms
[02:18:09] Finished 'clean:build' after 9.38 ms
[02:18:09] Finished 'clean' after 10 ms
[02:18:09] Starting 'build:codelabs'...
[02:18:09] Finished 'build:codelabs' after 1.49 ms
[02:18:09] Starting 'build:css'...
[02:18:09] Finished 'build:css' after 22 ms
[02:18:09] Starting 'build:scss'...
[02:18:09] 'build:scss' errored after 252 ms
[02:18:09] Error in plugin "gulp-sass"
Message:
    app/styles/_categories.scss
Error: Expected identifier.
  ┌──> app/styles/_categories.scss
50│   %bg-#{$color} {
  │         ^^^^^^
  ╵
  ╷
1 │ %bg-#4285f4
  │      ━ error in interpolated output
  ╵
  app/styles/_categories.scss 50:9    codelab-card()
  app/styles/_categories.scss 79:1    @import
  app/styles/_codelab-card.scss 18:9  @import
  app/styles/main.scss 22:9           root stylesheet
Details:
    formatted: Error: Expected identifier.
  ┌──> app/styles/_categories.scss
50│   %bg-#{$color} {
  │         ^^^^^^
  ╵
  ╷
1 │ %bg-#4285f4
  │      ━ error in interpolated output
  ╵
  app/styles/_categories.scss 50:9    codelab-card()
  app/styles/_categories.scss 79:1    @import
  app/styles/_codelab-card.scss 18:9  @import
  app/styles/main.scss 22:9           root stylesheet
    line: 50
    column: 9
    file: /home/vorburger/git/github.com/googlecodelabs/tools/site/app/styles/_categories.scss
    status: 1
    messageFormatted: app/styles/_categories.scss
Error: Expected identifier.
  ┌──> app/styles/_categories.scss
50│   %bg-#{$color} {
  │         ^^^^^^
  ╵
  ╷
1 │ %bg-#4285f4
  │      ━ error in interpolated output
  ╵
  app/styles/_categories.scss 50:9    codelab-card()
  app/styles/_categories.scss 79:1    @import
  app/styles/_codelab-card.scss 18:9  @import
  app/styles/main.scss 22:9           root stylesheet
    messageOriginal: Expected identifier.
  ┌──> app/styles/_categories.scss
50│   %bg-#{$color} {
  │         ^^^^^^
  ╵
  ╷
1 │ %bg-#4285f4
  │      ━ error in interpolated output
  ╵
  app/styles/_categories.scss 50:9    codelab-card()
  app/styles/_categories.scss 79:1    @import
  app/styles/_codelab-card.scss 18:9  @import
  app/styles/main.scss 22:9           root stylesheet
    relativePath: app/styles/_categories.scss
    domainEmitter: [object Object]
    domainThrown: false

[02:18:09] 'build' errored after 288 ms
[02:18:09] 'serve' errored after 291 ms

I recent encountered this error, I think the current scss implementations will not work with newer version of sass or gulp-sass. Try to keep all the versions for now, if you can't install all node packages try downgrading your node to at least v10.24.1. You can also use v11.15.0 as well, I have tested it personally.