Importing scss variables files without relative routes in Angular 6+

Or how to style tomatoes across your app with one single variable.

I’ve been doing a lot of things around Angular lately, but none of them are styling. So today I had to style some stuff and, of course, I wanted to declare some reusable variables, you know, DRY and all, and found out that the ~ character trick is notworking in the latest versions of the framework CLI.

But there’s a workaround.

So, imagine we have our nice  /src/assets/styles/_colors.scss file where we declare our shiny colors:

$fruitColor: tomato;
// some other less important colors

So, the way we do our shenanigans now is by adding this cute little stylePreprocessorOptions.includePaths in our angular.json file, inside the build.options property:

"build":{
   "builder":"@angular-devkit/build-angular:browser",
   "options":{
      "stylePreprocessorOptions":{
         "includePaths":[
            "src/assets/styles"
         ]
      }
   }

And now we can do the following in any of our scss files:

@import '_colors';

.fruit.tomato {
  color: $fruitColor;
}

And that’s it. Happy tomato styling.