使用 sass 的未绑定变量

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

在您的自定义 index.scss 开头导入 _variables.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";