Gulp 让Libsas吞下Susy一起工作

在过去的5天里，我一直在玩这个游戏，并试图让以下内容协同工作：

¬ Libsass
¬ Susy
¬ Gulp

但现在我已经开始工作了，我刚刚从

45s

到

700ms

这是我觉得应该分享的东西

初始问题

大口喝

gulp.task('sass', function () {
    return gulp.src('./frontend/sass/style.scss')
        .pipe(sass({
            'require':'susy'
        }))
        .pipe(gulp.dest('./app/www/css'))
});

Sass

@import "susy";

@import "susy";

$susy: (
    global-box-sizing: border-box,
    use-custom: (rem: true),
    columns: 12,
    gutters: (1/4),
    debug: (
        image: hide,
        color: rgba(#66f, .25),
        output: background,
        toggle: top right,
    )
);

初始错误

[23:58:08] Starting 'sass'...

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
Error: file to import not found or unreadable: susy
Current dir: C:/var/www/www.hutber.com/frontend/sass/

---

完整的工作设置

package.json

"devDependencies": {
    "gulp": "~3.8.10",
    "gulp-sass": "~1.3.2", //this installs libsass for us
    "gulp-sourcemaps": "~1.3.0",
    "gulp-plumber": "~0.6.6",
    "susy":"~2.2.2"
}

吞咽sass任务

var gulp = require('gulp');
var sass = require('gulp-sass');
var handleErrors = require('../util/handleErrors');
var sourcemaps = require('gulp-sourcemaps');
var minifyCSS = require('gulp-minify-css');

//libsass
gulp.task('sass', function () {
    return gulp.src('./frontend/sass/style.scss')
        .pipe(sourcemaps.init())
        .pipe(sass({
            includePaths: [
                './node_modules/susy/sass' //required for sass
            ]
        }))
        //.pipe(minifyCSS()) //move to prod settings
        .pipe(sourcemaps.write('./app/www/css')))
        .pipe(gulp.dest('./app/www/css'))
});

Sass

@import "susy";

@import "susy";

$susy: (
    global-box-sizing: border-box,
    use-custom: (rem: true),
    columns: 12,
    gutters: (1/4),
    debug: (
        image: hide,
        color: rgba(#66f, .25),
        output: background,
        toggle: top right,
    )
);

错误

@import "susy";

@import "susy";

$susy: (
    global-box-sizing: border-box,
    use-custom: (rem: true),
    columns: 12,
    gutters: (1/4),
    debug: (
        image: hide,
        color: rgba(#66f, .25),
        output: background,
        toggle: top right,
    )
);

您需要执行以下操作，以避免在运行任务时出现“只能比较数字”错误

更新节点sass的package.json

"devDependencies": {
    "gulp": "~3.8.10",
    "gulp-sass": "~1.3.2", //this installs libsass for us
    "gulp-sourcemaps": "~1.3.0",
    "gulp-plumber": "~0.6.6",
    "susy":"~2.2.2"
}

我必须更新libsass的依赖项，如下所示：

gulp-sass 1.3.1 
  ¬ node-sass 2.0.0-beta
     ¬ libsass 3.1.0-beta - This needed updating to libsass 3.1.0-beta.2

只要

节点sass

更新其依赖项以使用最新的

libsass

最后一步

gulp.task('sass', function () {
    return gulp.src('./frontend/sass/style.scss')
        .pipe(sass({
            'require':'susy'
        }))
        .pipe(gulp.dest('./app/www/css'))
});

然后在我的sass中使用

（1/4）

，而不仅仅是

1/4

。这将迫使它被视为一个数字。取材于

您应该能够在没有任何错误的情况下运行gulp

sass

它不工作

@import“susy”它很好工作
@\u导入“susy”为什么？