Path-less SASS Imports in your Angular App

Posted 10/14/2018 3:34 PM by Corey Klass

One of the nice features of SASS in your Angular-CLI app is that you can include an @import "variables"; command to include the SASS variable definitions from an external file. You can easily make your SASS import file globally available for @import statements, so that you only refer to it by filename, by modifying your /angular.json file in the following hierarchy: Root -> "projects" -> "my-project-name" -> "architect" -> "build" -> "options"

Under "options", create a new map entry called "stylePreprocessorOptions" if it does not exist. Within that, create an array entry called "includePaths". Within "includePaths", you can specify the relative path to your SASS file from the root of your project. For example, it may be located at "src/assets/sass".