使用sass的Unboud变量

Question

我使用https://github.com/Swiip/generator-gulp-angular来规范我的angularjs应用程序。

我平实地发现了引导主题，并希望使用它，并从[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/

为什么unbound variable $navbar-default-bg但是$navbar-default-bg存在于_variables.scss文件中。

$navbar-默认-bg：$品牌-主要；

我的项目结构：

​

Answer 1

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

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

另一种方法可能是遵循这些指令-- >> https://github.com/Swiip/generator-gulp-angular/issues/379。不过我还没试过呢。

Answer 2

尝试按以下顺序导入变量、引导程序、引导程序( https://github.com/thomaspark/bootswatch/blob/gh-pages/global/build.scss )

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

样板试图编译src文件夹中的所有.scss文件(当它应该忽略从_开始的scss文件时)。

在/src的外面移动平缓使它表现为

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