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

Question

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

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

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

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

@import '/styles/common';

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

通过配置 stylus-loader 看起来像 this is theoretical possible，但我无法为 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。