使用sass的unboud變量

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/ 

爲什麼unbound variable $navbar-default-bg但$navbar-default-bg存在_variables.scss文件。

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

我的項目結構：

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

嘗試導入順序變量，引導，bootswatch按照 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文件）。

移動flaty/src目錄之外使它的行爲如

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