Ignoring SASS Partials in the Angular-CLI Build

In my last post, I talked about how I'm attempting to port my current Angular 1 project to Angular2. I decided to use the CLI since it forces you to use the current "best practices."

After setting up my first route, I decided to pull over the HTML template and the existing styles.

This post is basically a duplicate of the Stack Overflow question that I asked, and then answered myself.

The Problem

Here is the basic format of the pre-existing SASS:

src/app/styles/master.scss

@import 'folder/variables';
@import 'folder/headers';

src/app/styles/folder/_variables.scss

$header-bg: #ababab;

src/app/styles/folder/_headers.scss

h1 {  
  background-color: $header-bg;
}

Unfortunately, after following the instructions on the Github readme, I was getting build errors.

In short, it was complaining that it couldn't find the declarations for variables in one of the SASS partials.

Here was the error:

Build failed.  
File: /my-app/tmp/sassplugin-input_base_pathjFTXlfed.tmp/0/  
src/app/styles/folder/_more.scss (2)  
The Broccoli Plugin: [SASSPlugin] failed with:  
Error: Undefined variable: "$header-bg".  

The Solution

After spending way too much time Googling and searching Stack Overflow, I decided to go line-by-line in the Angular-CLI source to better understand the build process.

As I read, I noticed that there were many ".scss", but none for "_.scss". Just about that time the most recent commit message caught my eye.
feat(SASSPlugin): Allow regexes to be passed to include/exclude certa…

I clicked on the commit, and boom! There was the answer.

angular-cli-build.js

sassCompiler: {  
  cacheExclude: [/\/_[^\/]+$/]
}

You can read the actual commit, here

Final Thoughts

Such a simple solution that took up so much of my time. I have a feeling that as I move forward, I'll find a few more "gotchas" along the way. However, I'm sure the documentation will get better over time, too.