时间戳

首页 > 解决方案 > Sass 无法使用 node_modules 文件夹中的“~”导入

css - Sass 无法使用 node_modules 文件夹中的“~”导入

问题描述

我正在使用 Angular 6 开发单页 Web 应用程序，并将以下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，但令我困扰的是它无法导入，因为它应该可以工作。

任何解决方案？

标签： cssangularsass

解决方案

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

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

推荐阅读