我们如何在 Angular 7 中为绝对路径配置 Stylus？

Question

我的 Angular 应用配置为使用 Stylus 进行样式设置。几乎我所有组件的样式都继承自 src/styles/common.styl，后者提供配置和混入。然而，这意味着我的手写笔文件都有很长的相对轨迹：

@import '../../../../styles/common';

这也意味着当我们设置一个新组件时，我们必须添加这一行，然后根据其文件夹嵌套级别确定要添加的适当数量的 ../。

我希望能够为我们的 Stylus 代码使用绝对路径。这意味着无论文件夹嵌套级别如何，都可以从应用程序中的任何组件使用如下导入：

@import '/styles/common';

在 Angular 7 中实现 Stylus 导入的绝对路径的最佳实践是什么？

看起来 this is theoretical possible by configuring stylus-loader, but I can't find a clean way to do that for Angular. Custom webpack configs 似乎是一个相关的选项，但它们似乎用于批量替换默认配置，而不是仅仅用一个配置修改它，我宁愿不必如果可以避免的话，从头开始重做 webpack 配置，只配置 Stylus 设置。

Answer 1

在 Stylus 中，您可以使用 ~:

非常轻松地进行根相对样式导入

@import "~src/styles/common";

根 tsconfig.json 中的 baseUrl 是：

"baseUrl": "./",

使用不同的 baseUrl，您将需要不同的导入模式。例如，src/ 的 baseUrl 要求您使用 @import "~styles/common" 作为仍解析为 src/styles/common.

的路径