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";

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/"
  ]
}

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";

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 😎