angular 12, sass, not recognizing "@use '~@angular/material' as mat;" and then "mat.define-typography-config"

Question

I am updating to Angular 12 from Angular 11. During ng serve, I am unable to compile this: https://material.angular.io/guide/typography#define-a-level

Backtrace

./src/custom-theme.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "...typography: mat": expected expression (e.g. 1px, bold), was ".define-typography-"
        on line 5 of src/custom-theme.scss
>> $custom-typography: mat.define-typography-config(

   -----------------------^

custom-theme.scss

@use '~@angular/material' as mat;

$custom-typography: mat.define-typography-config(
  $font-family: 'Lato, Helvetica'
);
@include mat.core($custom-typography);
...

My package.json has "node-sass": "^4.14.1",

Any ideas?