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