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

Question

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.

Answer 1

I have investigated this issue since I lately migrated a medium-size project from v11 to v12.

The issue is that you have your .scss files in the assets folder which is basically meant to be for assets to be copied as-is. Not to be processed by some kind of scss preprocessor.

Source https://angular.io/guide/workspace-config#asset-config

... folders you want to copy as-is when building your project.

However, files in the assets folder are being minifed and that's where the exception comes from. During the previous version, these files were probably preprocessed and that is the reason why this issue hasn't came up until now.

The solution is moving your global .scss files out of the assets folder. You can additionally list them in angular.json (styles property) if needed.

Answer 2

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.

Answer 3

As you say, the problem is to have sass / scss files in the assets folder.

Instead of moving these files out of the assets folder, you can just ignore them.

In angular.json, change

"assets": [
    "src/favicon.ico",
    "src/assets",
    ...
]

to

"assets": [
    "src/favicon.ico",
    {
        "glob": "**/*",
        "input": "src/assets/",
        "ignore": ["**/*.scss"],
        "output": "/assets/"
    },
    ...
]

Answer 4

I faced the same error, and my solution was to change the file angular.json, specifically the section projects -> "angular_name" -> architect -> configurations -> production -> optimization. Initially the value of optimization was optimization:true so I changed optimization section to this:

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

As you can see the option minify was set to false, After changing this everything started to work

Check this link for more details about optimization https://angular.io/guide/workspace-config#optimization-configuration