Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
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;
@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);
@extend .m-0;
font-family: 'Century Gothic';
font-weight: 400;
font-size: 1rem;
button {
@extend .p-0;
–
–
‼️ 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/2405040.
Disabling the optimisation temporarily gave me the correct error, and then I was able to fix it.
–
–
–
–
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)
–
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.
–
–
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;
some time the probleme was inside imports after upgrade angular version!
Be sure they have no "~" but the complete path !!
Hope that will help !
–
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!!
–
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.
–
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.
–
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!
If you have tried all solutions above and still didn't got the problem then try below things,
check for this:
undefined variables (this was my case)
wrong syntax
missing import file
spaces between calc function
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.
–
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.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
