[英]Sass failed to import using “~” from the node_modules folder
I'm using Angular 6 to develop a single page web application, and I added the following ngx-toast library to my project. 我正在使用Angular 6开发单页Web应用程序,并将以下ngx-toast库添加到了我的项目中。
when I added the following Sass into my project and when I used "~" instead of the relative path it failed to load the libraries: 当我将以下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';
but it's work when I'm using the relative path: 但是当我使用相对路径时它可以工作:
// 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';
my component modules 我的组件模块
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
of course that I can leave it like that, or just download the actual css from the manual, but it's bothering me that's it's fails to import since it should work. 当然,我可以像这样保留它,或者只是从手册中下载实际的CSS,但是令我困扰的是它无法导入,因为它应该可以工作。
any solutions? 有什么解决办法吗?
As per the SASS Docs, ~
will point to src/
folder, when we import any SCSS files. 根据SASS文档,当我们导入任何SCSS文件时,
~
都将指向src/
文件夹。 We need to tell angular to include node_modules/
path, when we import any sass file. 导入任何sass文件时,我们需要告诉angular要包括
node_modules/
路径。 This can be achieved using stylePreprocessorOptions
property inside angular.json. 这可以通过使用
stylePreprocessorOptions
属性来实现。
"styles": [
...
],
"stylePreprocessorOptions": {
"includePaths": [
"../node_modules/ngx-toastr"
]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.