0

I created a jhipster application. It got created with angular version 14. Later i upgraded it to 16. but running "ng build" throws error on the below line.

@import '~bootswatch/dist/materia/variables';
// Override Bootstrap variables
@import 'bootstrap-variables';
// Import Bootstrap source files from node_modules
@import '~bootstrap/scss/bootstrap';
@import '~bootswatch/dist/materia/bootswatch';

I am issue this error in files "vendor.scss, global.scss, navbar.component.scss and docs.component.scss"

I was able to fix it by changing the path to relative path, like,

@import '../../../../../node_modules/bootswatch/dist/materia/variables';
// Override Bootstrap variables
@import 'bootstrap-variables';
// Import Bootstrap source files from node_modules
@import '../../../../../node_modules/bootstrap/scss/bootstrap';
@import '../../../../../node_modules/bootswatch/dist/materia/bootswatch';

But I am not sure this is the right approach. can someone advise? Also i am not sure exactly when did the error occurred. i upgraded angular from "14.2.0" to "16.1.3" and bootstrap from "13.0.0" to "15.0.1".

1
  • You might try creating a new JHipster app with v8 beta and see how it's done there. v8 uses Angular 16. Jul 3 at 16:27

2 Answers 2

0

Someonthing somewhat new in SCSS is the @use at-rule. Check out this question to read more about the differences.

So this is obviously untested since I don't have you app, but I think you might be able to do this:

@use '~bootswatch/dist/materia/variables' as *;
// Override Bootstrap variables
@use 'bootstrap-variables' as *;
// Import Bootstrap source files from node_modules
@use '~bootstrap/scss/bootstrap' as *;
@use '~bootswatch/dist/materia/bootswatch' as *;
0

Actually, in Angular 14, you should have a warning indicating that using ~ in Sass imports is deprecated.
You can do @import 'bootstrap/scss/bootstrap' directly if you have defined

"stylePreprocessorOptions": {
    "includePaths": [
        "node_modules"
    ]
}

in your angular.json file.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.