2

我正在尝试让 gulp 编译sass并使用susy网格/框架。

我很难在网上找到有关此的任何信息。

我已经包括：

"gulp-ruby-sass": "^0.7.1",

进入我的package.json并安装了所有东西。

我的 gulp sassgulp 任务是这样的：

gulp.task('sass', ['images'], function () {
  return gulp.src('src/sass/*.{sass, scss}')
    .pipe(sass({
      bundleExec: true,
      sourcemap: true,
      sourcemapPath: '../sass'
    }))
    .on('error', handleErrors)
    .pipe(gulp.dest('build'));
});

所以我一生都无法弄清楚如何包含它，susy所以它符合使用gulp，我没有看过也似乎无法在网上找到任何与此相关的内容。

4

2 回答 2

5

你可以使用gulp-compass，你只需要在你的系统中安装 compass 并gulp-compass通过 npm 安装包，这里是一个示例代码：

var compass = require('gulp-compass');

gulp.task('compass', function() {
  return gulp.src('./src/*.scss')
  .pipe(compass({
    // Gulp-compass options and paths
    css: 'app/assets/css',
    sass: 'app/assets/sass',
    require: ['susy']
  }))
  .on('error', handleErrors)
  .pipe(gulp.dest('app/assets/temp'));
});

关于这个包的更多信息在这里

于 2014-09-15T07:29:15.687 回答
1

要从 Jamie 的回答中获得更多详细信息，以下是在没有指南针的情况下使用 susy 的方法。

  1. 从 github 下载 susy 的 .zip 包。将包解压到 node_modules 目录中。
  2. 就我而言，我把它放在 susy-master 文件夹中。

  3. 在 gulpfile.js 中，你可以有类似这样的东西来包含 susy 包。请注意，重要的是将正确的 includePath 值与 susy-master 文件夹的路径相同。

    gulp.task('sass', function(){
  gulp.src('public/sass/styles.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({
        outputStyle: 'compressed',
        includePaths: ['node_modules/susy-master/sass']
    }).on('error', sass.logError))

    .pipe(sourcemaps.write('maps'))
    .pipe(gulp.dest('public/css'))
});

  4. 在styles.scss中导入susy

    @import "susy";
于 2015-12-11T06:12:41.833 回答