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

Sass无法使用“〜”从node_modules文件夹导入

1 个答案: