css - 使用 sass 解除绑定(bind)变量

Question

我用了https://github.com/Swiip/generator-gulp-angular对我的 angularjs 应用程序进行样板化。

我平淡地发现了 bootswatch 主题并想使用它并从 [ http://bootswatch.com/flatly/][2] 下载两个文件，_variables.scss 和 _bootswatch.scss。

我将这两个文件添加到我的 vendor.scss

$icon-font-path: "../../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";

@import '../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap';

@import "flatly/variables";
@import "flatly/bootswatch";

使用 gulp serve，我构建了我的应用程序，它在控制台上显示给我。

project developer$ gulp serve
[21:28:41] Using gulpfile /Volumes/Developer/angularjs/project/gulpfile.js
[21:28:41] Starting 'styles'...
[21:28:42] gulp-inject 2 files into index.scss.

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
Error: /Volumes/Developer/angularjs/project/src/app/flatly/_bootswatch.scss:16: error: unbound variable $navbar-default-bg 

  [1]: https://github.com/Swiip/generator-gulp-angular
  [2]: http://bootswatch.com/flatly/

为什么 未绑定(bind)变量 $navbar-default-bg 但 $navbar-default-bg 存在于 _variables.scss 文件中。

$navbar-default-bg: $brand-primary;

我的元素结构:

Answer 1

在自定义 index.scss 的开头导入 _variables.scss 文件:

@import '../../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/variables';

另一种方法是遵循这些说明 >> https://github.com/Swiip/generator-gulp-angular/issues/379 .不过，我还没有尝试过。