使用 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

尝试按此顺序导入变量，bootstrap，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 文件时）。

将 flatly 移动到 /src 之外会使它表现得像

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

Answer 2

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

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

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

使用 sass 的未绑定变量

Unboud variable using sass

css

sass

twitter-bootstrap

angularjs