Sass failed to import using "~" from the node_modules folder - css

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"
]
}