'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 1:[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.
Solution 2:[2]
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/"
},
...
]
Solution 3:[3]
I created a new project using Angular CLI 12.0.0 and then copied over portions of angular.json that were missing or different from my project.
In this application, it was:
"projects": {
"schematics": {
"@schematics/angular:application": {
"strict": true
}
},
...,
"architect": {
"build": {
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "200kb",
"maximumError": "1024kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "mdsl-authoring:build:production"
},
"development": {
"browserTarget": "mdsl-authoring:build:development"
}
},
"defaultConfiguration": "development"
}
}
now ng serve works as expected. So if you're updating, be sure to check the differences between angular.json files in a new project vs yours.
Solution 4:[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
Solution 5:[5]
Make sure you don't have sass files inside /assets
I have my primary styles.scss file which references other files ...
@use '~@angular/material' as mat;
@import 'assets/preload/preload'; // this is preload.scss
As you can see one of the files is in assets. This is because it was originally included directly by the index.html file (for speed). With this nifty new inlining feature that uses critters I wanted it to be inlined using the default optimization settings.
SASS officially supports both common styles of commenting including //. However regular css (and the standard css parser) does not.
My preload.scss file happens to contain a few // style comments. This is absolutely fine when it's imported in styles.scss with @import because everything is processed through the sass compiler and // comments are fine.
However (and I'm not sure exactly why) the postcss-scss parser is looking inside /assets for scss files. It finds an invalid comment style and blows up. I think only ng serve does this.
The solution for me was just to move the preload.scss file to the same location as my other files. Hopefully if you're getting this same issue the fix will be the same.
Other observations / speculation:
ng serveloads and processes every file in assets (you can see it doing this if you enable verbose mode). I'm not sure exactly *what it's doing tbh but it's at that phase when it fails. And it does this even if it isn't referenced by anything.- If I run a production it doesn't fail because it's just copying assets without processing them.
- If I disable
optimization/minifythen it also succeeds withng serve. It's only in the minification thatpost-cssis run. - I think this is a bug but I'm not entirely sure. It doesn't make sense to be processing asset files like this and is probably taking time.
Solution 6:[6]
From my part it was because I had wrong scss code. For example, incorrect variable setting.
Solution 7:[7]
I was strugling with this same problem. I needed to first add this:
npm --save install postcss-scss
https://www.npmjs.com/package/postcss-scss
and create the
postcss.config.js
file on root of the project.
add
module.exports = {
syntax: 'postcss-scss',
};
most importantly don't forget to do
npm audit fix --force
now you can ng build or ng serve
this should fix the current angular 12 bug.
Solution 8:[8]
Moving the offending styles dir to the includePaths of stylePreprocessorOptions did the trick for me.
"stylePreprocessorOptions": {
"includePaths": [
"src/assets"
]
},
Solution 9:[9]
Had the same problem. How I managed to solve it was by fixing the syntax errors from old Scss to new Scss.
It takes some time but in the end, it was all worth it.
(I had code from 2017 that I needed to use in Angular 12)
Solution 10:[10]
If anyone is getting the same error but has nothing to do with angular 12 or scss files being in the assets folder, it might be because you have errors in your scss file.
Errors can be:
- importing another file that does not exist
- syntax errors
- using undeclared variables or mixins
Solution 11:[11]
Angular 12
Add these code above "fileReplacements" foreach environment configuration in angular.json
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true,
example:
"configurations": {
"staging": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true,
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.testing.ts"
}]
},
"testing": {},
"local": {}
}
Solution 12:[12]
I'm having the same problem as you, but I couldn't fix it with your example.
this occurs when I update the @angular-devkit/build-angular package from version "^ 0.1000.2" to "^12.0.2"
assets/scss/fix.scss - Error: assets/scss/fix.scss from Css Minimizer
D:\home\admin-pref-new\assets\scss\fix.scss:169:6: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser [assets/scss/fix.s
css:169,6]
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser
comments on scss files
// ng-select para manter a mesma cor do boostrap
.ng-select {
&.ng-select-disabled {
> .ng-select-container {
background-color: #E3E3E3 !important;
}
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow