DEV Community

Cover image for How to simplify and clean your sass import with Angular.json
Dany Paredes
Dany Paredes

Posted on

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';
Enter fullscreen mode Exit fullscreen mode

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"
        ]
}...
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)