./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

[enurberk]

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

[alan-agius4]

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.

[Estevete]

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

[alan-agius4]

@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.

[enurberk]

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

[alan-agius4]

@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.

[enurberk]

I created repro-app

[enurberk]

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

[alan-agius4]

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

[enurberk]

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)

[alan-agius4]

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

Angular 8 is also no longer under support.

[enurberk]

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.

[angular-automatic-lock-bot]

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