editor.component.scss:17:100: ERROR: Unterminated string token - Angular + Scss

Question

I am getting unterminated string token error in my angular application that uses scss as stringUrl.

@import "~bootstrap/scss/bootstrap";

.view-container, .module-row, .view, .view-inner-container {
    flex: 1;
}

.advanced-editor-wrapper {
    @extend .h-100;
    .advanced-editor-header {
        @extend .p-2, .d-flex, .align-items-center, .justify-content-between;
        border-bottom: 1px solid #333;
        h4 {
            @extend .d-inline, .m-0;
        }
        .header-button {
            @extend .mr-2, .btn;
        }
    }
    .parent-flex-container {
        @extend  .p-2, .w-100, .h-100, .d-flex, .flex-column;
        .add-view {
            @extend .btn, .h-100, .m-1, .w-100, .d-flex, .flex-column, .align-items-center, .justify-content-center; 
            flex-basis: 50px;
            background-color: transparent !important;
            border: 2px dashed #2799A5;
            color: var(--body-color);
            transition: all 0.2s ease-in;
            border-radius: 5px;
            &:hover {
                background-color: #333 !important;
                border-color: var(--body-color);
            }
            &.flex-row {
                flex-direction: row !important;
            }
        }
        .module-row-container {
            @extend  .d-flex, .flex-column, .h-100;
            .module-row {
                @extend  .d-flex, .flex-row, .mb-2;
                .view-container {
                    @extend .w-100, .d-flex, .flex-row;
                    .view-inner-container {
                        @extend  .d-flex, .flex-row;
                        .view {
                            @extend .m-1, .h-100, .position-relative, .d-flex, .flex-column, .align-items-center, .justify-content-center;
                            border-radius: 5px;
                            .view-header {
                                @extend .d-flex, .justify-content-between, .align-items-center, .p-2, .position-absolute, .w-100;
                                left: 0; 
                                top: 0;  
                                background-color: rgba(0,0,0,0.3);
                                h5 {
                                    @extend .m-0;
                                    font-family: 'Century Gothic'; 
                                    font-weight: 400; 
                                    font-size: 1rem;
                                }
                                button {
                                    @extend .p-0;
                                }
                            }
                        }
                    }
                }
            }    
        }
    }
}    

Dejong

This answer that advises setting minify: false seems to have fixed this issue for me: https://mcmap.net/q/346171/-you-tried-to-parse-scss-with-the-standard-css-parser-try-again-with-the-postcss-scss-parser-after-angular-12-update – Holton

Answer 1

browserslist is included by @angular-devkit/build-angular, try running:

npx browserslist --update-db

This will update the caniuse-lite database with browsers, which helped me get rid of the ...17:100: ERROR: Unterminated string token error.

(the trick of setting minify: false did also work for me, but I rather have an up to date list of browsers, than turning off minifying)

Alike

did not work for @ Angular v14 – Gospodin

when I try with this case, its output is "No target browser changes", and not working for me. – Colonialism

Answer 2

‼️ Don't disable optimization or minification ‼️

I had a similar issue which was pointing to an SCSS file at line 17, but that file doesn't have that number of lines-

I spent 4-5 hours trying to fix the issue, but nothing worked. People suggest disabling miniification, but it is never recommended because that will reduce the performance of your code.

I missed the part that Angular do various optimisation in the production build, which is not enabled in the development mode. And because of that, the build errors can be misleading. I was reminded again by the answer https://stackoverflow.com/a/73663201/ which recommends setting optimization: false in your angular.json file.

Disabling the optimisation temporarily gave me the correct error, and then I was able to fix it.

Lustring

I have the same problem, but disabling the optimization doesn't give me a different error. I just get the same error saying that there is an "Unterminated string token"... any ideas? – Gehrke

I have this exact issue on non prod builds. ng serve with "optimization": false – Whether

I simply removed all inline comments (//) as suggested and the error was gone. – Nunhood

Answer 3

Had the same problem when building an SSR build, turned out it was a configuration error in my angular.json. I have a stylePreprocessorOptions property defined with the styles paths in the "build" section of the angular.json, but I didn't have this for the "server" build.

I fixed it by adding the exact same stylePreProcessorOptions value to the options of that build configuration, here a snippet of my angular.json below:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "my-project": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/browser",
            ...
            "stylePreprocessorOptions": {
              "includePaths": [
                "src/app/core/styles",
                "src/assets"
              ]
            ...
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/",
            ...
            "stylePreprocessorOptions": {
              "includePaths": [
                "src/app/core/styles",
                "src/assets"
              ]
            }
          }
          ...

I hope this helps you in some way, please let me know if it worked.

Alit

Thanks for the answer! Unfortunately, this doesn't seem to work for me. I still see this error, like OP: gist.github.com/micahstubbs/ee9e05c4d5f84bb42771d2b0dc8dcf91 – Holton

I tried the other 2 answers (turning optimization off, updating browserslist db) but they did not work but this one did! Thanks – Hagood

Answer 4

In my case it was this scss rule, it worked fine in previous angular versions, and failed with this error after upgrade to angular 13.

.lessonName {
    width: calc(100%-200px);
    display: inline-block;
}

See the problem? Me neither. The issue is that css doesn't like no spaces around the minus (-) symbol. Changing it to the below fixed the problem. Seriously angular devs, a line number would have helped immensely!

.lessonName {
    width: calc(100% - 200px);
    display: inline-block;
}

Moncton

the scss compilation is not done by angular. – Horoscope

Answer 5

remove '~' from the beginning @import:

@import "~bootstrap/scss/bootstrap";

@import "bootstrap/scss/bootstrap";

Wrought

Answer 6

Sometimes the problem was inside imports after upgrading the Angular version. Be sure they have no "~", but the complete path.

Yammer

Answer 7

IMPORTANT - Don't run any command or disable minification

The issue can be usage of a variable in your scss file which can't be found. The error will not well point you to correct line where something might be missing!

So carefully observe what that variable which can't be found or you might be missing an import of the css file!!

Hydroid

You are very right, the other answers which are suggesting to disable modification are absolutely wrong. – Lustring

Answer 8

Most important thing!

Line 17 is NOT special. It is probaly NOT your file's line #17.

That is hinted at in other answers but I felt it needed to be made clearer!

My issue (similar to some others):

I had renamed an scss file that was included in many places but hadn't updated the filename everywhere.

Venessavenetia

In my case, I copy pasted some code, so I had an undefined variable name inside an ng-deep. I guess at that point it wasn't able to give me a useful error message and gave me this generic error instead. – Villiers

Answer 9

In our case the

Error: Transform failed with 1 error: <scss file path>17:100: ERROR: Unterminated string token

was caused by the fact that we accidentally published the raw source code (including scss files) of our Angular library to our npm repository, instead of publishing the dist folder (including the generated css). The error occurred on 'ng serve' in the component that uses this library from our npm repository.

Solution: publish the dist folder.

Leishmaniasis

Answer 10

Check the path of you import it may be wrong, or a ';' may be missing

Amelita

Answer 11

For me it was because I thought mat would be imported when importing another file that had @use '@angular/material' as mat; in it. But no, I needed to have @use '@angular/material' as mat; in every file that used it, or I got this odd error. The error message is not helpful!

Matutinal

Also there were a few ::ng-deep that have been deprecated blog.angular-university.io/angular-host-context from Jan talks about these (at time of this being written they weren't deprecated) – Matutinal

If ::ng-deep ever stops working there will be a LOT of people in big trouble! – Venessavenetia

Answer 12

I came here because of the same error, but obviously the error itself says nothing. As someone suggested, I disabled minify just to try something else, and got a more specific error:

SassError: @use rules must be written before any other rules.

As simple as it gets... just moved @use above everything else, and the project compiled succesfully.

I hope it helps someone!

Wenzel

Answer 13

If you have tried all solutions above and still didn't got the problem then try below things,

check for this:

1. undefined variables (this was my case)
2. wrong syntax
3. missing import file
4. spaces between calc function

Sacculate

Answer 14

For me this error was caused by calc() function as well but with no obvious difference in the spaces.

I solved it by copying the calc() function from another css file in my project and pasted it in the css file the error was pointing at. Then the error went away.

Maybe there was a hidden character somewhere that was not visible in the IDE.

Devorahdevore

Answer 15

In my case, the ng build process failed with an unexpected token (closing error) when using the CSS variable with the url() function. To resolve this issue, I had to comment out the original variable declaration and redeclare it while enclosing the value of the url function in double quotes.

Here's the solution that worked for me:

// --bs-btn-close-bg: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e);
--bs-btn-close-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E");

By enclosing the URL value in double quotes, the ng build process no longer threw an error, and the CSS variable was applied as expected.

Snuffer

Answer 16

I have this same issue and i fixed by adding space :

@media only screen and(max-width: 480px) {
    h5 {
      margin: 1rem 0;
    }

    p {
      margin: 0.5rem 0;
    }
  }
}
@media only screen and (max-width: 480px) {
  h5 {
    margin: 1rem 0;
  }

  p {
    margin: 0.5rem 0;
  }
}

Make sure to add a space between and and (max-width: 480px) in the media query.

Youngling

Answer 17

It works for me, when I switch from CSS_PROPERTY: math.div(A, B); to CSS_PROPERTY: A / B;

Digitate

Actually this was my issue and worked for me. I changed the property to CSS_PROPERTY: calc(A / B) instead of the suggested CSS_PROPERTY: A / B – Vandervelde

Answer 18

i had the same error same line, one day it was working , the next day it is not . i deleted the whole content of the scss , built it and it worked , then "ctrl+z" returned the code to the scss file and build it again , and now it is working fine. hope that helps.

Inconsiderate