Я использую Angular 6 для разработки одностраничного веб-приложения, и я добавил в свой проект следующую библиотеку ngx-toast .
когда я добавил следующий Sass в мой проект, и когда я использовал «~» вместо относительного пути, он не смог загрузить библиотеки:
// 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'
но это работа, когда я использую относительный путь:
// 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'
мои составные модули
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
конечно, я могу оставить это так, или просто загрузить фактический css из руководства, но это беспокоит меня, что он не импортируется, так как он должен работать.
любые решения?
Всего 1 ответ
Согласно SASS Docs, «~» укажет на папку «src /», когда мы импортируем любые файлы SCSS. Нам нужно указать угловое включение пути node_modules /, когда мы импортируем любой sass-файл. Этого можно добиться с помощью свойства stylePreprocessorOptions внутри angular.json.
"styles": [
...
],
"stylePreprocessorOptions": {
"includePaths": [
"../node_modules/ngx-toastr"
]
}