How to avoid long relative paths import in your angular app π
How we can improve the code smells that exist in our angular application.
I am a Full Stack Developer working on Next Generation Software, Web & Mobile Technologies since 8+ years. Have a look on my portfolio: https://linktr.ee/mawaisshaikh
- I am Pakistanβs first AWS DevAx Mentor and an Auth0 Ambassador.
- Community Member (Google Developer Groups).
- Community Member (Angular).
- An open-source contributor. π»
- Tech speaker. π€
- Mentor. π
I have spoken at multiple international community events including google developer groups like #gdgSoweto, #AngularDutch, #ngKolachi as well π
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.
