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

user_903137 0
Viewed 6935

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;
                                }
                            }
                        }
                    }
                }
            }    
        }
    }
}
angular sass
8 Answers

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.

user_59229940

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;
}
user_34265140

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)

user_55503860

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

user_190166050

some time the probleme was inside imports after upgrade angular version!

Be sure they have no "~" but the complete path !!

Hope that will help !

user_63652450

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!

user_12125390

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!

user_143794120

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

user_96318500
Related