How to simplify and clean your sass import with Angular.json

When we work with Sass and Angular, import files is a very common task, and if you have more than 10 files and want to change the path of your sass structure?

@import 'shared/styles/colors';
@import 'shared/forms/input';
@import 'shared/forms/select';
@import 'shared/mixis/grid';

All files need to be updated and are not nice, let angular help with it.

Angular.json to rescue

Go to angular.json file, under styles add stylePreprocessorOptions object with includePaths option and define all paths available in an array with your file paths, it should be relative to the angular.json.

"styles": [
   "src/styles.scss"
   ],
"stylePreprocessorOptions": {
   "includePaths": [
        "src/share/forms",
        "src/share/styles",
        "src/share/mixins"
        ]
}...

Angular will compile using these paths, and you can remove them from your files, and the compiler found these files.

@import 'colors';
@import 'input';
@import 'select';
@import 'grid';

Done!!

Everything is working with a clear path for your sass files and If in the future you want to change path or rename, only need to edit the angular.json file :)

Background photo created by whatwolf - www.freepik.com