DEV Community

Cover image for How to avoid long relative paths import in your angular app 🚂
Muhammad Awais
Muhammad Awais

Posted on

How to avoid long relative paths import in your angular app 🚂

The purpose of writing this blog is to show you guys how we can improve the code smells that exist in our angular application, one of that code smells is importing base scss/less files with longer relative paths.

This problem will be faced if you are working on slightly large angular apps.

@import "../../../../variables";
Enter fullscreen mode Exit fullscreen mode

This looks weird, this nesting path depends on how deep your component is, where you are importing the variables scss/less file. The more complex issue is, if you gonna change the location of your variables scss/less file in the future, then you have to change all the imports related to this variables scss/less file.

Let's Solve this Issue 🚀

1. Adding stylePreprocessorOptions object inside angular.json

projects > app_name > build 👈 follow this hierarchy

inside your build object add this

"stylePreprocessorOptions": {
  "includePaths": [
    "src/",
    "src/assets/less/"
  ]
}
Enter fullscreen mode Exit fullscreen mode

So, you have imported the less directory with the hierarchy, now you can only import the filenames which exist inside the less directory, same goes for src/ path as well.

@import "variables";
Enter fullscreen mode Exit fullscreen mode

This looks cool and clean ❤️, it doesn't matter if you change the location of your scss files now, you only have to change the path once inside the angular.json file.

That's All Folks 😎

Discussion (1)

Collapse
suleymastalskiy profile image
Валера

Cool! Thanks for sharing!