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

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?

Continue reading...