css - Sass 无法使用 "~"从 node_modules 文件夹导入

Question

我正在使用 Angular 6 开发单页 Web 应用程序， 我添加了以下 ngx-toast library到我的元素。

当我将以下 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，但令我困扰的是它无法导入，因为它应该可以工作。

有什么解决办法吗？

Answer 1

根据 SASS 文档，当我们导入任何 SCSS 文件时，~ 将指向 src/ 文件夹。当我们导入任何 sass 文件时，我们需要告诉 Angular 包含 node_modules/ 路径。这可以使用 angular.json 中的 stylePreprocessorOptions 属性来实现。

"styles": [
  ...
],
"stylePreprocessorOptions": {
  "includePaths": [
    "../node_modules/ngx-toastr"
  ]
}