Question

我正在努力编译我的sass并使用susy网格/框架。

我在网上找到任何有关此信息的麻烦。

我已经包括：

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

进入我的package.json并安装了所有内容。

我的gulp sass gulp任务喜欢这样：

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，我没有看过，似乎无法找到任何与此相关的内容

Answer 1

您可以使用gulp-compass，只需在系统中安装指南针并通过npm安装gulp-compass包，以下是示例代码：

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'));
});

有关此软件包的更多信息here

Answer 2

要获得Jamie的答案的更多细节，这里是你可以做什么来使用没有指南针的susy ..

从github下载.zip包的susy。提取包进入 node_modules目录。
就我而言，我把它放在susy-master文件夹中。

在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'))
});

在styles.scss中导入susy
```
@import "susy";
```

使用GULP编译SASS和SUSY

2 个答案: