How to avoid long relative paths import in your angular app π
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.