CODEWITHSUNDEEP
angularsass
Ashish
Ashish

Reputation: 14707

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

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

Upvotes: 54

Views: 46073

Answers (18)

samuel cote
samuel cote

Reputation: 103

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

Upvotes: 6

Shashank Agrawal
Shashank Agrawal

Reputation: 25807

‼️ 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-

enter image description here

enter image description here

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.

enter image description here

Upvotes: 44

Amin MilanTash
Amin MilanTash

Reputation: 9

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.

Upvotes: 0

Zia Khan
Zia Khan

Reputation: 435

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.

Upvotes: 0

Travel and code enthousiast
Travel and code enthousiast

Reputation: 591

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.

Upvotes: 0

Simon_Weaver
Simon_Weaver

Reputation: 146188

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.

Upvotes: 2

Eassa Nassar
Eassa Nassar

Reputation: 1230

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.

Upvotes: -1

Md Abdul Shahed
Md Abdul Shahed

Reputation: 109

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

Upvotes: 0

Hendrik Jan van Randen
Hendrik Jan van Randen

Reputation: 348

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.

Upvotes: 1

HamidReza
HamidReza

Reputation: 1934

remove '~' from the beginning @import:

@import "~bootstrap/scss/bootstrap";

@import "bootstrap/scss/bootstrap";

Upvotes: 7

TARJU
TARJU

Reputation: 1994

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!!

Upvotes: 4

Genki
Genki

Reputation: 1

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!

Upvotes: 0

Haitham
Haitham

Reputation: 61

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

Upvotes: -1

Justin Grayston
Justin Grayston

Reputation: 472

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!

Upvotes: 0

user230910
user230910

Reputation: 2372

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

Upvotes: 7

Michael Johansen
Michael Johansen

Reputation: 1447

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)

Upvotes: 27

Fred
Fred

Reputation: 1

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

Upvotes: 0

Mike Moolenaar
Mike Moolenaar

Reputation: 192

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.

Upvotes: 18

Related Questions