Gulp中的loadPath

Question

我已经通过Bower（位于/ bower-components文件夹中）安装了Bourbon和Neat，我想知道我是否可以使用Gulp在我的.scss文件中调用它们。

@import 'bourbon';

我刚刚从Grunt转来，想知道Gulp是否有类似的loadPath选项。我通常使用它来引用我的Gruntfile.js中的Bower目录，如下所示：

sass: {
  dist: {
    options: {
      style: 'expanded',
      loadPath: '<%= app %>/bower_components/foundation/scss'
    files: {
      '<%= app %>/css/app.css': '<%= app %>/scss/app.scss'
    }
  }
}

任何有关此的帮助将不胜感激。提前谢谢！

Answer 1

我最终使用gulp-ruby-sass，虽然比gulp-sass慢一点，但功能很丰富，例如loadPath。

Answer 2

让我向您展示一个安装bootstrap的示例，安装gulp-ruby-sass但在此之前请确保先安装ruby：

npm install gulp-ruby-sass --save-dev

在gulpfile.js中定义流程：

var sass = require('gulp-ruby-sass')

gulp.task('processSCSS', function () {
  return sass('./path/to/scss/you/mention/@important/main.scss', {
    style: 'compressed',
    loadPath: [
      './path/to/scss',
      './path/to/bower_component/bootstrap-sass/assets/stylesheets'
    ]
  })
    .on('error', sass.logError)
    .pipe('./path/to/dest/stylesheets/')
});

在main.scss中调用样式表：

@import 'bootstrap'