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 😎