Sass не удалось импортировать, используя «~» из папки node_modules

Я использую 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"
  ]
}

Есть идеи?

10000