如何在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配置只是配置一个手写笔设置，如果我们可以避免它。

Answer 1

在Stylus中，您可以使用〜进行根相对样式导入非常简单：

@import "~src/styles/common";

根tsconfig.json中的baseUrl所在的位置是：

"baseUrl": "./",

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