Compiling SASS and SUSY with GULP

泄露秘密 提交于 2019-12-03 21:44:14

You can use gulp-compass, you only need to have compass installed in your system and install gulp-compass package through npm, here is a sample code:

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

More info about this package here

To have more details from Jamie's answer, here is what you can do to use susy without compass..

  1. download .zip package of susy from github. extract package into node_modules directory.
  2. In my case I put it in susy-master folder.
  3. In gulpfile.js, you could have some thing like this to include susy package. Note that the important is to put correct includePath value to be the same path of the susy-master folder..

    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. Import susy in styles.scss

    @import "susy";
    
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!