Sass failed to import using “~” from the node_modules folder

Question

I'm using Angular 6 to develop a single page web application, and I added the following ngx-toast library to my project.

when I added the following Sass into my project and when I used "~" instead of the relative path it failed to load the libraries:

   // regular style toast 
@import '~ngx-toastr/toastr.css';

// bootstrap style toast 
// or import a bootstrap 4 alert styled design (SASS ONLY) 
// should be after your bootstrap imports, it uses bs4 variables, mixins, functions 
@import '~ngx-toastr/toastr-bs4-alert';

// if you'd like to use it without importing all of bootstrap it requires 
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~ngx-toastr/toastr-bs4-alert';

but it's work when I'm using the relative path:

// regular style toast 
@import '../../node_modules/ngx-toastr/toastr.css';

// bootstrap style toast 
// or import a bootstrap 4 alert styled design (SASS ONLY) 
// should be after your bootstrap imports, it uses bs4 variables, mixins, functions 
@import '../../node_modules/ngx-toastr/toastr-bs4-alert';

// if you'd like to use it without importing all of bootstrap it requires 
@import '../../node_modules/bootstrap/scss/functions';
@import'../../node_modules/bootstrap/scss/variables';
@import '../../node_modules/bootstrap/scss/mixins';
@import '../../node_modules/ngx-toastr/toastr-bs4-alert';

my component modules

   @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

of course that I can leave it like that, or just download the actual css from the manual, but it's bothering me that's it's fails to import since it should work.

any solutions?

Answer 1

As per the SASS Docs, ~ will point to src/ folder, when we import any SCSS files. We need to tell angular to include node_modules/ path, when we import any sass file. This can be achieved using stylePreprocessorOptions property inside angular.json.

"styles": [
  ...
],
"stylePreprocessorOptions": {
  "includePaths": [
    "../node_modules/ngx-toastr"
  ]
}