在scss导入路径中使用波浪号(~
(时,它会在Angular中扩展到node_modules/
。是否有任何官方文档说这是 Angular 或 webpack 的一个功能?
到目前为止,我发现的关于此事的只是以前角度版本的一些错误报告,说它已损坏,以及一条评论说这是一个不应依赖的实现细节。
我希望做一个ng eject
并检查配置,但该命令不再可用。
如果有人能指出我一些官方文档,说明~
是node_modules/
路径的简写,或者一段指定该替换的源代码(例如配置文件(,我将不胜感激。 :)
基本上,我想弄清楚为什么这有效,以及如何工作。
这是 WebPack 的一个特性。波浪号解析由 Webpack 的 sass-loader 插件处理。我相信此功能的好处是可以导入字体、图像等资源。直接从您的 WebPack 捆绑包中放入您的 CSS 文件中。因此,它必须支持相同的语法来解析 WebPack 路径。
它在importsToResolve.js
文件中实现。
https://github.com/webpack-contrib/sass-loader/blob/aa9b53b4d1c14117c4ca114a13cecb6e53b4e87a/src/importsToResolve.js#L12
这是一个很棒的功能,但是当你想在 WebPack 和非 Webpack 项目之间共享 SASS 文件时,会引入问题,因为 node-sass 不支持这个特性。