angular - 是否有任何官方文档指定 ~ (代字号)解析为 node_modules/in Angular scss 导入路径？

Question

在 scss 导入路径中使用波浪号 (~) 时，它会在 Angular 中扩展为 node_modules/。有没有官方文档说这是 Angular 或 webpack 的特性？

到目前为止，我在这件事上发现的只是一些关于以前的 Angular 版本的错误报告说它已经坏了，还有一条评论说它是 an implementation detail that shouldn't be relied upon .

我希望做一个 ng eject并检查配置，但该命令不再可用。

如果有人能指出一些官方文档说明 ~ 是 node_modules/ 路径的简写，或者一段源代码，我将不胜感激指定替换的代码(例如配置文件)。 :)

基本上，我想弄清楚为什么它会起作用，以及它是如何起作用的。

Answer 1

这是 WebPack 的一个特性。波浪号解析由 sass-loader 处理Webpack 的插件。我相信此功能的好处是可以直接从您的 WebPack 包导入字体、图像等资源到您的 CSS 文件中。因此，它必须支持相同的语法来解析 WebPack 路径。

它在importsToResolve.js 文件中实现。

https://github.com/webpack-contrib/sass-loader/blob/aa9b53b4d1c14117c4ca114a13cecb6e53b4e87a/src/importsToResolve.js#L12

这是一个很棒的功能，但是当您想在 WebPack 和非 Webpack 项目之间共享 SASS 文件时会引入问题，因为 node-sass不支持此功能。