Angular 14 Error: Transform failed with 1 error: ERROR: Unterminated string token - css

Question

When running ng serve I have this result:
*./src/main.ts - Error: Module build failed
(from./node_modules/#ngtools/webpack/src/ivy/index.js)
../.component.scss:17:100: ERROR: Unterminated string token
*./src/polyfills.ts` - Error: Module build failed
(from./node_modules/#ngtools/webpack/src/ivy/index.js)
../.component.scss:17:100: ERROR: Unterminated string token
This angular version
Angular CLI: 14.0.6
Node: 16.16.0
Package Manager: NPM 8.14.0
OS: win32 x64
Angular: 14.0.6
Package Version
---------------------------------------------------------
#angular-devkit/architect 0.1400.6
#angular-devkit/build-angular 14.0.6
#angular-devkit/core 14.0.6
#angular-devkit/schematics 14.0.6
`#angular/cdk 14.0.5`
#angular/material 14.0.5
#nguniversal/express-engine 7.1.1
#schematics/angular 14.0.6
`rxjs 6.6.7`
typescript 4.6.4
/.component.scss
input[type=text]:disabled {
color: black;
}
.search-row {
.form-group > label {
font-size: 1.1em !important;
color: black;
}
}
.mat-table {
th.mat-header-cell {
font-size: 1.1em !important;
color: black;
}
}//<< here line 17.
#block {
margin: 0% 10%;
}
...
thank you for your help

Answer 1

For anyone landing there, temporarily set optimization: false in your angular.json file. The will allow to see the real error.
In my case it was an unsupported stylesheet import. But it can be any error thrown by Webpack sass-loader.

Answer 2

I added the "path/name" of the scss files in angular.json->projects->project name ->architect->build->options->styles as following then I could find the exact scss issues.
{
...
"projects": {
...
"my-project": {
...
"architect": {
"build": {
...
"options": {
...
"styles": [
...
"src/scss/style.scss",
"src/app/components/playlistDetail/playlist-detail.component.scss",
...
]
}
},
Then I could see Sass error as following.
./src/app/components/items/viewitem/viewitem.component.ts - Error: Module build failed (from ./node_modules/#ngtools/webpack/src/ivy/index.js):
Error: Transform failed with 1 error:
E:/f2022_indy/front/src/app/components/fan/fan.component.scss:17:100: ERROR: Unterminated string token
./src/app/components/fan/fan.component.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected whitespace.
╷
89 │ #media screen and(max-width: 767px) {
│ ^
╵
src\app\components\fan\fan.component.scss 89:26 root stylesheet

Answer 3

Run the following command
npx browserslist --update-db

Answer 4

For anyone that still has this issue, you can set optimization: false in your angular.json file and rebuild to see the real error with details and then put optimization: true back.
for me the error was that i had an $dark-color variable that is undefined.

Answer 5

I upgraded angular project from 5.2 to 14, I saw this error and its not displayed from which file the error came from.
I tried optimization: false in angular.json file but it did not work since upgrade converted .angular-cli.json to angular.json and json structure seems to be wrong.
I created a new sample project with angular and moved angular.json file from there to upgraded project folder, then changed optimization: false
This time errors shown are specific with line and file name. I resolved those errors in project css files and able to do ng serve