./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js): Error: Transform failed with 1 error: src/app/@theme/layouts/two-columns/two-columns.layout.scss:17:100: ERROR: Unterminated string token 1 error: ERROR: Unterminated string token #24765

2023-02-23T07:48:08Z

Command

update

Is this a regression?

Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

Angular 8.0.2

Description

I update my angular project 8.0.2 to 15.1.5 using this link
I followed Angular Update Guide instruction and i faced up with this errors.

./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Transform failed with 1 error:
C:/Users/elifn/OneDrive/Masaüstü/kardemir-angular_17.02.2023/src/app/@theme/layouts/two-columns/two-columns.layout.scss:17:100: ERROR: Unterminated string token

./src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Transform failed with 1 error:
C:/Users/elifn/OneDrive/Masaüstü/kardemir-angular_17.02.2023/src/app/@theme/layouts/two-columns/two-columns.layout.scss:17:100: ERROR: Unterminated string token

./src/app/@theme/styles/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
 
 @import '~@nebular/theme/styles/theming';

  src\app\@theme\styles\themes.scss 2:9  @import
  src\app\@theme\styles\styles.scss 6:9  root stylesheet

./src/app/@theme/styles/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  @import '~@nebular/theme/styles/theming';

  src\app\@theme\styles\themes.scss 2:9  @import
  src\app\@theme\styles\styles.scss 6:9  root stylesheet

My Angular Versions

Minimal Reproduction

./src/main.ts ->
/**

@license
Copyright Akveo. All Rights Reserved.
Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));

Exception or Error

/node_modules/@ngtools/webpack/src/ivy/index.js ->
"use strict";
/**
 * @license
 * Copyright Google LLC All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */
Object.defineProperty(exports, "__esModule", { value: true });
exports.AngularWebpackLoaderPath = exports.AngularWebpackPlugin = exports.default = void 0;
var loader_1 = require("./loader");
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return loader_1.angularWebpackLoader; } });
var plugin_1 = require("./plugin");
Object.defineProperty(exports, "AngularWebpackPlugin", { enumerable: true, get: function () { return plugin_1.AngularWebpackPlugin; } });
exports.AngularWebpackLoaderPath = __filename;

Your Environment

src/app/@theme/layouts/two-columns/two-columns.layout.scss->
@import '../../styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';

@include nb-install-component() {
  .menu-sidebar::ng-deep.scrollable {
    padding-top: nb-theme(layout-padding-top);
  }
}

Anything else relevant?

No response

The text was updated successfully, but these errors were encountered:

2023-02-23T09:27:06Z

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

2023-02-23T10:12:15Z

We are also facing the issue with the imports in scss

@import "~src/styles/_colors.scss";

SassError: Can't find stylesheet to import. @import "~src/styles/_colors.scss";

Angular version 15.2.0

2023-02-23T10:34:11Z

@Estevete, that is expected. Please see the changelog for all the breaking changes in version 15.

https://github.com/angular/angular-cli/releases/tag/15.0.0.

2023-02-23T11:05:20Z

I changed some of .scss file import paths like ->
@import '~bootstrap/scss/mixins/breakpoints';
@import '/node_modules/bootstrap/scss/mixins/breakpoints';

and then i have different errors now ->
./src/app/@theme/styles/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.

35 │ @include nb-auth-global();

src\app@theme\styles\styles.scss 35:3 @content
node_modules@nebular\theme\styles\core\theming_install.scss 150:7 @content
node_modules@nebular\theme\styles\core\theming_install.scss 136:7 nb-install-global-with-scss-vars()
node_modules@nebular\theme\styles\core\theming_install.scss 149:5 nb-install()
src\app@theme\styles\styles.scss 31:1 root stylesheet

./src/app/@theme/styles/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.

35 │ @include nb-auth-global();

src\app@theme\styles\styles.scss 35:3 @content
node_modules@nebular\theme\styles\core\theming_install.scss 150:7 @content
node_modules@nebular\theme\styles\core\theming_install.scss 136:7 nb-install-global-with-scss-vars()
node_modules@nebular\theme\styles\core\theming_install.scss 149:5 nb-install()
src\app@theme\styles\styles.scss 31:1 root stylesheet

2023-02-23T11:43:02Z

@enurberk, please check the changelog mentioned above.

Imports like the below;

import '~bootstrap/scss/mixins/breakpoints';

Need to be updated to remove the tilde to

import 'bootstrap/scss/mixins/breakpoints';

Also it is worth mentioning that @import in Scss has been deprecated since 2019. Please see https://sass-lang.com/documentation/at-rules/import

Re, the ng new error, the problem is that you are running the ng new command inside a workspace, please run the command outside of a workspace. IE: a directory that does not have an angular.json.

2023-02-23T11:59:56Z

I created repro-app

2023-02-23T13:13:29Z

I updated my imports as you said.
And again i have this errors below:

./src/app/@theme/styles/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
╷
33 │ @include nb-auth-global();
│ ^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src\app@theme\styles\styles.scss 33:3 @content
node_modules@nebular\theme\styles\core\theming_install.scss 146:7 @content
node_modules@nebular\theme\styles\core\theming_install.scss 122:3 nb-install-global-with-css-props()
node_modules@nebular\theme\styles\core\theming_install.scss 145:5 nb-install()
src\app@theme\styles\styles.scss 29:1 root stylesheet

./src/app/@theme/styles/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
╷
33 │ @include nb-auth-global();
│ ^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src\app@theme\styles\styles.scss 33:3 @content
node_modules@nebular\theme\styles\core\theming_install.scss 146:7 @content
node_modules@nebular\theme\styles\core\theming_install.scss 122:3 nb-install-global-with-css-props()
node_modules@nebular\theme\styles\core\theming_install.scss 145:5 nb-install()
src\app@theme\styles\styles.scss 29:1 root stylesheet

and my styles.scss file is like below:
// @import url(' https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');
@import "@angular/material/prebuilt-themes/deeppurple-amber.css";
// @import "../../../../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";

// themes - our custom or/and out of the box themes
@import 'themes';

// framework component themes (styles tied to theme variables)
@import '@nebular/theme/styles/globals';
@import '@nebular/theme/styles/all';
@import '@nebular/theme/styles/theming';

@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import "bootstrap/scss/maps";
@import 'bootstrap/scss/mixins';
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/helpers";
@import "bootstrap/scss/utilities/api";

// loading progress bar theme
@import './pace.theme';

@import './layout';
@import './overrides';
@import './_asana';

// install the framework and custom global styles
@include nb-install() {

// framework global styles
@include nb-theme-global();
@include nb-auth-global();

@include ngx-layout();
// loading progress bar
@include ngx-pace-theme();

@include nb-overrides();
};

2023-02-23T15:00:10Z

You are getting an undefined mixin Sass error as nb-auth-global is not found.

2023-02-23T18:32:34Z

How can i solve ?
I ran these commands. But it didnt worked.

npm i @nebular/theme
npm i @nebular/auth
npm i sass-mixins

And i tried this solution
Also i tried this solution
But none of them worked.

Could you check my repro-app project ? repro-app (it is made with my old version angular 8)

2023-02-23T19:08:25Z

This issue tracker is not suitable for support requests, please repost your issue on StackOverflow.

Angular 8 is also no longer under support.

2023-02-23T19:42:29Z

I guess while updating my project i install packages locally. So when i ran ng new repro-app its created with old version.
I will repost on StackOverFlow.
Thank you for your helps.

2023-03-26T08:02:58Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

alan-agius4 added the needs: repro steps We cannot reproduce the issue with the information given label Feb 23, 2023

alan-agius4 closed this as not planned Won't fix, can't repro, duplicate, stale Feb 23, 2023

alan-agius4 removed the needs: repro steps We cannot reproduce the issue with the information given label Feb 23, 2023

angular-automatic-lock-bot bot locked and limited conversation to collaborators Mar 26, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js): Error: Transform failed with 1 error: src/app/@theme/layouts/two-columns/two-columns.layout.scss:17:100: ERROR: Unterminated string token 1 error: ERROR: Unterminated string token #24765

./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js): Error: Transform failed with 1 error: src/app/@theme/layouts/two-columns/two-columns.layout.scss:17:100: ERROR: Unterminated string token 1 error: ERROR: Unterminated string token #24765

enurberk commented Feb 23, 2023 •

edited by alan-agius4

alan-agius4 commented Feb 23, 2023

Estevete commented Feb 23, 2023 •

edited

alan-agius4 commented Feb 23, 2023

enurberk commented Feb 23, 2023

alan-agius4 commented Feb 23, 2023

enurberk commented Feb 23, 2023

enurberk commented Feb 23, 2023

alan-agius4 commented Feb 23, 2023

enurberk commented Feb 23, 2023

alan-agius4 commented Feb 23, 2023

enurberk commented Feb 23, 2023

angular-automatic-lock-bot bot commented Mar 26, 2023

./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js): Error: Transform failed with 1 error: src/app/@theme/layouts/two-columns/two-columns.layout.scss:17:100: ERROR: Unterminated string token 1 error: ERROR: Unterminated string token #24765

./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js): Error: Transform failed with 1 error: src/app/@theme/layouts/two-columns/two-columns.layout.scss:17:100: ERROR: Unterminated string token 1 error: ERROR: Unterminated string token #24765

Comments

enurberk commented Feb 23, 2023 • edited by alan-agius4

Command

Is this a regression?

The previous version in which this bug was not present was

Description

Minimal Reproduction

Exception or Error

Your Environment

Anything else relevant?

alan-agius4 commented Feb 23, 2023

Estevete commented Feb 23, 2023 • edited

alan-agius4 commented Feb 23, 2023

enurberk commented Feb 23, 2023

alan-agius4 commented Feb 23, 2023

enurberk commented Feb 23, 2023

enurberk commented Feb 23, 2023

alan-agius4 commented Feb 23, 2023

enurberk commented Feb 23, 2023

alan-agius4 commented Feb 23, 2023

enurberk commented Feb 23, 2023

angular-automatic-lock-bot bot commented Mar 26, 2023

enurberk commented Feb 23, 2023 •

edited by alan-agius4

Estevete commented Feb 23, 2023 •

edited