代码之家 › 专栏 › 技术社区 › Or Yaacov

Sass无法使用“~”从node\u modules文件夹导入

sass angular css

0

Or Yaacov · 技术社区 · 7 年前

当我将以下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 回复 | 直到 7 年前

1

belzebu 7 年前

根据SASS文件, ~ 将指向 src/ 文件夹,当我们导入任何SCSS文件时。我们需要告诉angular node_modules/ 路径,当我们导入任何sass文件时。这可以通过使用 stylePreprocessorOptions angular.json中的属性。

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