
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.