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主题.scss文件如下：

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

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

// 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";

编译Bootstrap SASS文件时出错

1 个答案: