You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser after Angular 12 update

After updating from Angular 11 to 12, ng serve is now throwing an error:

Error: /Users/btaylor/work/angular-apps/mdsl-authoring/assets/scss/_colors.scss:1:4: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

Error: /Users/btaylor/work/angular-apps/mdsl-authoring/assets/scss/custom-bootstrap.scss:1:1: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

Error: /Users/btaylor/work/angular-apps/mdsl-authoring/assets/scss/global.scss:296:12: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

Error: /Users/btaylor/work/angular-apps/mdsl-authoring/assets/scss/mdsl-composer/mdsl-composer-variables.scss:103:1: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

None of the SCSS files in question is doing anything special. _colors.scss for example is simply:

// Bootstrap Overrides
$text-secondary: #2E93B1;
$text-muted: #ccc;
$link-color: #2E93B1;

.text-secondary {
  color: $text-secondary !important;
}

// LabCorp UI Overrides
$theme-colors: (
  'primary': #003A70,
  'secondary': #2E93B1,
  'success': #155724,
  'danger': #790E1D,
  'warning': #C59C38,
  'info': #007A6E,
  'light': #EDF1F4,
  'dark': #0B1519,
);

// UI design colors
$primary: #007FA3;
$highlighted: #D57800;
$accent: #5F456F;
$accent-secondary: #808080;
$related: #D1EAF1;

So I'm not sure what Unknown word the parser is complaining about.

I'm not finding very much information online regarding this error with Angular.

The rest of the project code will compile as expected, but now the application won't run. I'm not sure what other code to provide here, but am more than happy to post whatever would be helpful for debugging.

The error is specific to Angular CLI. Our project uses Angular Universal, and building the code and serving it via Node work as expected.

Solution

For those of you finding this right after updating to Angular 12 be sure to carefully read the Angular 12 Update Guide.

The relevant section is :

Critical CSS inlining is now enabled by default. To turn this off, set inlineCritical to false. See PR #20096 and the Style preprocessor options section of Angular workspace configuration.

What it's doing is actually looking at your index.html file and inspecting stylesheet entries, then trying to include them in the source.

As some others have said setting optimization: false can solve the problem - but I'm guessing you didn't do your bundle size any favors with that one!

Instead you can change inlineCritical to false which you can do by setting something like this. See the full configuration for optimization.

"optimization": {
  "scripts": true,
  "styles": {
    "minify": true,
    "inlineCritical": false
  },
  "fonts": true
}

Another possibly relevant change in Angular 12 is the inlineStyleLanguage option.