编译 Bootstrap SASS 文件时出错

Question

我已经设置 gulp 来处理我的 Bootstrap 模板编译：

gulp.task('sass', function() {
  return gulp.src('app/assets/sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('app/assets/css'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

我的 SASS main theme.scss 文件如下所示：

@import "helpers/variables"; // custom variables    
@import "../bootstrap/sass/bootstrap"; // original Bootstrap files
@import "pages/index"; // custom styles

问题是当我覆盖helpers/variables 中的原始引导变量时，例如：

// Variables

$navbar-height: 100px;

我收到以下错误：

错误：找不到要导入的文件或无法读取：帮助程序/变量。

但是，在我收到错误消息后保存主要的 main.scss 而不进行任何更改可以解决问题，因此编译可以正常进行。有什么想法吗？

PS：我的scss文件树如下：

/assets/bootstrap/sass/_bootstrap.scss
/assets/sass/helpers/_variables.scss
/assets/sass/pages/_index.scss
/assets/sass/theme.scss

Answer 1

bootstrap.scss 正在寻找相对于其自身路径的文件 helpers/_variables.scss。编辑 bootstrap.scss 以获得您自己的 _variables.scss 文件路径。

作为说明，（没有正确或错误的方法）我发现以这种方式使用框架设置 sass 主题很有帮助：

src/
├── scss/
│   ├── my-theme/
│   │   ├── my-theme.scss
│   │   ├── _components.scss (and so on)
│   │   └── _new-variables.scss (a modified copy of bootstrap's)
│   └── vendor/
│       └── bootstrap/ (unaltered, for easier upgrading)
|           ├── bootstrap.scss
|           ├── _alerts.scss (and so on)
|           └── variables.scss
└─── main.scss

而 main.scss 看起来像这样：

// Core variables and mixins
@import "my-theme/new-variables";
@import "bootstrap/mixins";

// Reset and dependencies
@import "bootstrap/normalize";
@import "bootstrap/print";
@import "bootstrap/glyphicons";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/code";

... the rest of boostrap stuff here ...

// Custom Theme 
@import "my-theme/my-theme";