使用 Gulp 和 gulp-ruby-sass 编译 Foundation 6

Question

我正在同时学习 Django、Foundation、Gulp 和 SASS。到目前为止，这一直很有趣，但我现在碰壁了。我正在尝试使用 Gulp.

编译 Foundation 6

Foundation 的文档给出了如何使用 G运行t 执行此操作的示例，但除此之外仅描述了需要发生的事情：http://foundation.zurb.com/sites/docs/sass.html#compiling-manually

我在下面写的任务是基于我在这里看到的：https://www.npmjs.com/package/gulp-ruby-sass/

这是我现在的 gulpfile.js:

const gulp = require('gulp');
const sass = require('gulp-ruby-sass');
const autoprefixer = require('gulp-autoprefixer');

autoprefixer({ browsers: ['last 2 version', 'ie >= 9', 'and_chr >= 2.3'] });

gulp.task('default', function() {

});

gulp.task('compile-foundation', function() {
  sass('scss/*.scss', sass, {
    loadPath: [ 'node_modules/foundation-sites/scss' ]
    })
    .on('error', sass.logError)
    .pipe(gulp.dest('css'))
});

这是我在运行 gulp compile-foundation:

时得到的输出

[20:20:35] Using gulpfile ~/learnlojbandotcom/learnlojbandotcom/gulpfile.js
[20:20:35] Starting 'compile-foundation'...
[20:20:35] Finished 'compile-foundation' after 22 ms
[20:20:35] error scss/_settings.scss (Line 44: File to import not found or unreadable: util/util.)

这是我的目录结构：

djangosandbox/
  djangoapp/
    # django application files
  djangoproject/
    css/
    gulpfile.js
    html/ # Template files will go in here.
    __init__.py
    node_modules/
      autoprefixer/
      foundation-sites/
      gulp/
      # and many more...
    __pycache__/
    scss/
      _settings.scss
      styles.scss # Imports _settings.scss
    settings.py
    urls.py
    wsgi.py

Answer 1

找到了。问题是在 Gulp 任务中传递给 sass 函数的第二个参数 ("sass"):

sass('scss/*.scss', sass, {
#this is the bugger ^^^^

我不知道我把它放在那里的时候在想什么。删除它解决了问题。

使用 Gulp 和 gulp-ruby-sass 编译 Foundation 6

Compiling Foundation 6 with Gulp and gulp-ruby-sass

django

sass

zurb-foundation

gulp

gulp-ruby-sass