2

My Angular app is configured to use Stylus for its styling. Almost all my components' styles inherit from src/styles/common.styl which provides configuration and mixins. However that means my stylus files all have long relative trails:

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

This also means that when we set up a new component, we have to add this line then figure out the appropriate number of ../'s to add based on its folder nestling level.

I'd like to be able to use absolute paths for our Stylus code instead. That means being bale to use an import like the following from any component in the application regardless of folder nesting level:

@import '/styles/common';

What's the best practice for achieving absolute paths for Stylus imports in Angular 7?

It looks like this is theoretical possible by configuring stylus-loader, but I can't find a clean way to do that for Angular. Custom webpack configs seem like a relevant option, but they appear to be used for wholesale replacing the default config rather than just amending it with a piece of configuration, and I would prefer not to have to redo the webpack configuration from the ground up to just configure a Stylus setting if we can avoid it.

doppelgreener
  • 4,809
  • 10
  • 46
  • 63

1 Answers1

3

In Stylus you can do root relative style imports pretty easy with ~:

@import "~src/styles/common";

where the baseUrl in the root tsconfig.json is:

"baseUrl": "./",

With a different baseUrl you'll need a different import pattern. For example a baseUrl of src/ requires you to use @import "~styles/common" for the path to still resolve to src/styles/common.

doppelgreener
  • 4,809
  • 10
  • 46
  • 63
bryan60
  • 28,215
  • 4
  • 48
  • 65