Unknown word You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser #20812

naveedahmed1 · 2021-05-17T04:58:37Z

🐞 Bug report

Command (mark with an `x`)

[x ] build
[x ] serve

Is this a regression?

Yes, the previous version in which this bug was not present was: 12.0.0-rc.1

Description

After upgrading my app to Angular CLI V 12, when I try to compile my Angular app it throws below error:

mixins.scss:7:10: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

site.scss:84:1: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

🔬 Minimal Reproduction

Upgrade any Angular app to V 12, and I believe it should have same behavior, since the only change I made in my project it upgrade to V12.

Below is my angular.json:

{
  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "Mustakbil": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "ngx-build-plus:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "progress": true,
            "aot": true,
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/manifest.json",
              "src/firebase-messaging-sw.js"
            ],
            "styles": [
              "src/assets/styles/site.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "optimization": {
                "scripts": true,
                "styles": {
                  "minify": true,
                  "inlineCritical": false
                },
                "fonts": true
              },
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "serviceWorker": true
            }
          }
        },
        "serve": {
          "builder": "ngx-build-plus:dev-server",
          "options": {
            "browserTarget": "Mustakbil:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "Mustakbil:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "Mustakbil:build"
          }
        },
        "test": {
          "builder": "ngx-build-plus:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "scripts": [],
            "styles": [
            ],
            "assets": [
              "src/assets",
              "src/manifest.json"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist-server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json",
            "sourceMap": true,
            "optimization": false
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "media",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "bundleDependencies": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        },
        "prerender": {
          "builder": "@nguniversal/builders:prerender",
          "options": {
            "browserTarget": "Mustakbil:build:production",
            "serverTarget": "Mustakbil:server:production",
            "routes": [
              "/"
            ]
          },
          "configurations": {
            "production": {}
          }
        }
      }
    }
  },
  "defaultProject": "Mustakbil",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "app",
      "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "app"
    }
  }
}

🔥 Exception or Error


\assets\styles\mixins.scss:7:10: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

\assets\styles\site.scss:84:1: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

🌍 Your Environment


Angular CLI: 12.0.0
Node: 14.16.0
Package Manager: npm 6.14.11
OS: win32 x64

Angular: 12.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, google-maps, language-service, material
... platform-browser, platform-browser-dynamic, platform-server
... pwa, router, service-worker

Package                          Version
----------------------------------------------------------
@angular-devkit/architect        0.1200.0
@angular-devkit/build-angular    12.0.0
@angular-devkit/core             12.0.0
@angular-devkit/schematics       12.0.0
@angular/fire                    6.1.4
@nguniversal/aspnetcore-engine   12.0.0
@nguniversal/builders            12.0.0
@nguniversal/common              12.0.0
@schematics/angular              12.0.0
rxjs                             6.6.7
typescript                       4.2.3

The text was updated successfully, but these errors were encountered:

alan-agius4 · 2021-05-17T05:39:43Z

I'm sorry, but we can't reproduce the problem following the instructions you provided.
Remember that we have a large number of issues to resolve, and have only a limited amount of time to reproduce your issue.
Short, explicit instructions make it much more likely we'll be able to reproduce the problem so we can fix it.

If the problem persists, please open a new issue following our submission guidelines.

A good way to make a minimal repro is to create a new app via ng new repro-app and add the minimum possible code to show the problem. Then you can push this repository to github and link it here.

submarines-and · 2021-05-17T07:04:15Z

I got this as well. Fixed by removing node_modules + yarn.lock and then reinstalling modules. That would also explain why it can't be reproduced with a fresh project.

JounQin · 2021-05-17T10:16:09Z

I got this as well. Fixed by removing node_modules + yarn.lock and then reinstalling modules. That would also explain why it can't be reproduced with a fresh project.

I can't fix it by doing like you said... No idea what is happening...

PhilippMeissner · 2021-05-17T14:06:06Z

Do you use any scss variables within mixins.scss that you did not import properly? We were facing the same issue and this was the underlying problem.

naveedahmed1 · 2021-05-17T16:34:29Z

Its strange I am unable reproduce it in new project but yet unable to fix it in my ow project either, even after removing node_modules, package-lock and even npm cache clean --force.

I remember it first occurred in 12.0.0-rc.1 but removing node_modules and `package-lock' fixed the issue, but its not working this time.

Here's my mixins.scss

@import "variables";

$spaceamounts: (0, 5, 10, 15, 20, 25, 30);

  @each $space in $spaceamounts {
    .mt#{$space} {
      margin-top: #{$space}px !important;
    }

    .mr#{$space} {
      margin-right: #{$space}px !important;
    }

    .mb#{$space} {
      margin-bottom: #{$space}px !important;
    }

    .ml#{$space} {
      margin-left: #{$space}px !important;
    }

    .pt#{$space} {
      padding-top: #{$space}px !important;
    }
    .pr#{$space} {
      padding-right: #{$space}px !important;
    }

    .pb#{$space} {
      padding-bottom: #{$space}px !important;
    }

    .pl#{$space} {
      padding-left: #{$space}px !important;
    }
  }


@mixin rounded($border-radius: 4px) {
  -webkit-border-radius: $border-radius !important;
  -moz-border-radius: $border-radius !important;
  border-radius: $border-radius !important;
}

@mixin shadow($box-shadow: 0px 0px 3px #d9d9d9) {
  -webkit-box-shadow: $box-shadow !important;
  -moz-box-shadow: $box-shadow !important;
  box-shadow: $box-shadow !important;
}

@mixin transition($transition) {
  -moz-transition: $transition;
  -o-transition: $transition;
  -webkit-transition: $transition;
  transition: $transition;
}

@mixin animation($animation) {
  position: relative;
  -moz-animation: $animation;
  -o-animation: $animation;
  -webkit-animation: $animation;
  animation: $animation;
}

@mixin border($width: 1px, $style: solid, $color: #f0f0f0) {
  border: $width $style $color;
}

.occupy {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}


@mixin li-style($color: #e0e0e0) {
  border-color: lighten($color,10%);
  color: $color;
}

and variables.scss

/*Colors*/
$color-white: #fff;
$color-black: #000;

$color-gray-darker: #b0bec5;
$color-gray-dark: #cfd8dc;
$color-gray: #eceff1;
$color-gray-light: #f5f5f5;
$color-gray-lighter: #fafafa;


/*$color-primary: #3f51b5;
$color-primary-dark: darken(#3F3075,10%);
$color-primary-light: lighten(#3F3075,10%);*/



$color-primary: #384171;
$color-primary-dark: #353e6d;
$color-primary-light: #5f668e;


/*$color-primary: #3f51b5;
$color-primary-dark: darken(#3f51b5,20%);
$color-primary-light: lighten(#3f51b5,20%);*/




$color-accent: #e91e63;


/*$color-text: #546E7A;*/
$color-text: rgba(0,0,0,.77);
/*$color-text: rgba(0,0,0,.87);*/

//$color-link: #283593;
$color-link: #185abc;
/*$color-link: #0079d6;*/
$color-link-hover: $color-text;
/*$color-link-inverse: $color-text;
$color-link-inverse-hover: #307de6;*/

/*Fonts*/
/*$font:'Roboto';*/
$font-size-base: 13px;
$font-size-large: ceil(($font-size-base * 1.25));
/*$font-size-small: ceil(($font-size-base * 0.85));*/
$font-size-small: 12px;


/*$fa-font-display: fallback;*/

Any help would be really appreciated.

crooksey · 2021-05-18T11:57:27Z

Realted? postcss/postcss-import#448

dmk1111 · 2021-05-18T12:54:20Z

Edit: the only correct way to solve the issue is to move any .scss files from assets folder so they're not copied to dist.

next message kept here for history purposes, maybe it could help anyone

I had same error message for ng serve only. Managed to fix it adding "buildOptimizer": false and "optimization": false to architect.build.configurations.myServeConfig inside angular.json.
Look like this error is thrown by cssnano lib inside OptimizeCssWebpackPlugin. Probably it tries to parse styles as regular CSS instead of SCSS. This happened only to styles inside assets folder.

FrancescoBorzi · 2021-05-18T15:10:26Z

I can confirm this issue. I have the same problem in my app when trying to upgrade from Angular 11 to Angular 12.

Apparently, it does not like comments in scss anymore. Removing those comments fixes the issue, but it's indeed something that should be properly fixed.

JounQin · 2021-05-19T02:39:43Z

Realted? postcss/postcss-import#448

postcss-import is already pinned to 14.0.1 in @angular-devkit/build-angular.

JounQin · 2021-05-19T07:17:05Z

@alan-agius4 There is a reproduction from angular/angular#42166 now https://github.com/ryuseikurata/ng-v12-error

And as @dmk1111 said, after setting optimization: false, there will be no error anymore(buildOptimizer doesn't matter on my side). And this error only occurs on ng serve.

alan-agius4 · 2021-05-19T08:15:11Z

From the reproduction, it appears that the issue is caused when scss files are being copied to the dist instead of being processed, caused by misconfiguration of the project.

In the mentioned project colors.scss is in the assets/ folder, this is causing it be included in the compilation as an uncompiled asset because the build is configured to copy such files https://github.com/ryuseikurata/ng-v12-error/blob/54af1d100bd8108045416598b88ec49f68dba3dd/angular.json#L30 which is caused postcss to fail.

edusoccer1121 · 2021-05-19T22:47:54Z

From the reproduction, it appears that the issue is caused when scss files are being copied to the dist instead of being processed, caused by misconfiguration of the project.

In the mentioned project colors.scss is in the assets/ folder, this is causing it be included in the compilation as an uncompiled asset because the build is configured to copy such files https://github.com/ryuseikurata/ng-v12-error/blob/54af1d100bd8108045416598b88ec49f68dba3dd/angular.json#L30 which is caused postcss to fail.

The upcoming patch will address this via #20764, but truly it's recommended to avoid copying unneeded assets as this will cause increase in memory usage. There is really reason to why one should distribute SCSS files.

This definitely fixed the issue in my end. Change angular.json to import specific folders in which there are no scss files. And voila.

Thank you @alan-agius4.

shrek-kurata · 2021-05-20T02:28:35Z

@edusoccer1121

I can't make the angular output dist/assets below the code

{
                "glob": "**/*",
                "input": "project/~~/src/assets",
                "ignore": ["**/*.scss"],
                "output": "dist/~~/browser/assets"
              },

can you show your configuration ?

JounQin · 2021-05-20T03:29:52Z

@alan-agius4 I'm still getting this error message after upgrading to @angular/cli@12.0.1.

styles/global.scss from Css Minimizer 
/Users/JounQin/Workspaces/Alauda/icarus/styles/global.scss:1:1: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser [styles/global.scss:1,1]
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser
    at Input.error (/Users/JounQin/Workspaces/Alauda/icarus/node_modules/postcss/lib/input.js:123:16)
    at Parser.unknownWord (/Users/JounQin/Workspaces/Alauda/icarus/node_modules/postcss/lib/parser.js:518:22)
    at Parser.other (/Users/JounQin/Workspaces/Alauda/icarus/node_modules/postcss/lib/parser.js:149:12)
    at Parser.parse (/Users/JounQin/Workspaces/Alauda/icarus/node_modules/postcss/lib/parser.js:59:16)
    at parse (/Users/JounQin/Workspaces/Alauda/icarus/node_modules/postcss/lib/parse.js:11:12)
    at new LazyResult (/Users/JounQin/Workspaces/Alauda/icarus/node_modules/postcss/lib/lazy-result.js:122:16)
    at Processor.process (/Users/JounQin/Workspaces/Alauda/icarus/node_modules/postcss/lib/processor.js:33:12)
    at cssnanoMinify (eval at transform (/Users/JounQin/Workspaces/Alauda/icarus/node_modules/css-minimizer-webpack-plugin/dist/minify.js:34:28), <anonymous>:49:61)
    at minify (/Users/JounQin/Workspaces/Alauda/icarus/node_modules/css-minimizer-webpack-plugin/dist/minify.js:15:32)
    at Object.transform (/Users/JounQin/Workspaces/Alauda/icarus/node_modules/css-minimizer-webpack-plugin/dist/minify.js:35:24)

naveedahmed1 · 2021-05-20T05:05:46Z

it's recommended to avoid copying unneeded assets as this will cause increase in memory usage. There is really reason to why one should distribute SCSS files.

Thank you so much @alan-agius4, In my case my scss files were in assets/styles folder, I moved it to /src/styles and it fixed the issue.

Rebaiahmed · 2021-06-03T10:28:19Z

optimization

Hi, can you explain more how do you resolve it?

dmk1111 · 2021-06-03T10:44:24Z

optimization

Hi, can you explain more how do you resolve it?

The proper way to resolve it is to move any .scss files from assets folder.

angular-automatic-lock-bot · 2021-07-04T08:02:50Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

alan-agius4 added the needs: repro steps We cannot reproduce the issue with the information given label May 17, 2021

petebacondarwin mentioned this issue May 19, 2021

【Version 12】scss load error angular/angular#42166

Closed

alan-agius4 closed this as completed May 19, 2021

alan-agius4 mentioned this issue May 19, 2021

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

Closed

15 tasks

pamtbaau mentioned this issue May 23, 2021

"ng build --watch" breaks when any scss file in /assets folder, contains // #20909

Closed

14 tasks

Nexucis mentioned this issue Jun 7, 2021

upgrade angular to v12 perses/perses#51

Merged

angular-automatic-lock-bot bot locked and limited conversation to collaborators Jul 4, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unknown word You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser #20812

Unknown word You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser #20812

naveedahmed1 commented May 17, 2021

alan-agius4 commented May 17, 2021

submarines-and commented May 17, 2021 •

edited

JounQin commented May 17, 2021

PhilippMeissner commented May 17, 2021

naveedahmed1 commented May 17, 2021

crooksey commented May 18, 2021

dmk1111 commented May 18, 2021 •

edited

FrancescoBorzi commented May 18, 2021

JounQin commented May 19, 2021

JounQin commented May 19, 2021 •

edited

alan-agius4 commented May 19, 2021 •

edited

edusoccer1121 commented May 19, 2021

shrek-kurata commented May 20, 2021

JounQin commented May 20, 2021

naveedahmed1 commented May 20, 2021

Rebaiahmed commented Jun 3, 2021

dmk1111 commented Jun 3, 2021

angular-automatic-lock-bot bot commented Jul 4, 2021

Unknown word You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser #20812

Unknown word You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser #20812

Comments

naveedahmed1 commented May 17, 2021

🐞 Bug report

Command (mark with an x)

Is this a regression?

Description

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

alan-agius4 commented May 17, 2021

submarines-and commented May 17, 2021 • edited

JounQin commented May 17, 2021

PhilippMeissner commented May 17, 2021

naveedahmed1 commented May 17, 2021

crooksey commented May 18, 2021

dmk1111 commented May 18, 2021 • edited

FrancescoBorzi commented May 18, 2021

JounQin commented May 19, 2021

JounQin commented May 19, 2021 • edited

alan-agius4 commented May 19, 2021 • edited

edusoccer1121 commented May 19, 2021

shrek-kurata commented May 20, 2021

JounQin commented May 20, 2021

naveedahmed1 commented May 20, 2021

Rebaiahmed commented Jun 3, 2021

dmk1111 commented Jun 3, 2021

angular-automatic-lock-bot bot commented Jul 4, 2021

Command (mark with an `x`)

submarines-and commented May 17, 2021 •

edited

dmk1111 commented May 18, 2021 •

edited

JounQin commented May 19, 2021 •

edited

alan-agius4 commented May 19, 2021 •

edited