在angular 2组件中访问bootstrap scss变量

我正在使用Angular CLI构建新的Angular2项目，并且已将该项目配置为使用SCSS。我已经将Bootstrap 4成功加载到我的styles.scss文件中，但是，如果尝试访问任何Bootstrap的文件（或styles.scss从组件中定义的我自己的变量，则会Undefined Variable出现构建错误）。

组件的样式文件是否在styles节点的主条目之前进行编译angular-cli.json？我如何才能使在全局级别定义的任何变量可用于应用程序中的所有组件？谢谢！

angular-cli.json

"apps": [
  {
    ...
    "styles": [
      "styles/styles.scss"
    ],
    ...
  }
]

styles.scss

// Bootstrap
$enable-flex: true; // Enable Flexbox mode
@import "../../node_modules/bootstrap/scss/bootstrap";

零件

.navbar {
  background: $brand-primary; // Undefined variable here
}