1

我毫不怀疑其他人已经得到了这个工作......我只是还没有完全弄清楚现在是如何工作的。

吞咽

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

gulp.task('sass', function () {
    return gulp.src('./frontend/sass/style.scss')
        .pipe(sourcemaps.init())
        .pipe(sass({
            'require':'susy'
        }))
        //.pipe(minifyCSS())
        .pipe(sourcemaps.write('./app/www/css'))
        .on('error', handleErrors)
        .pipe(gulp.dest('./app/www/css'))
});

萨斯

@import "susy";

吞咽运行

[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/rnli.hutber.com/frontend/sass/

我已经在根gulp文件旁边安装了 susy@2.2.2，其中包含以下内容：gem install susy

当前使用 gulp-ruby-sass 的工作设置

但是我确实让它工作了，这证实了 susy 正在通过使用以下代码安装的 gem 工作：

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

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

注意上面的代码在使用gulp-ruby-sass@1.0.0alpha' It will only work as I can tell withv0.7.1` 时不起作用

包.json

  "devDependencies": {
    "gulp": "~3.8.10",
    "gulp-sass": "~1.3.2",
    "gulp-ruby-sass": "~0.7.1",
    "gulp-sourcemaps": "~1.3.0",
    "susy":"~2.2.1"
  }

我如何才能susy正常工作并能够编译成css?

4

2 回答 2

4

我已经设法让susy使用libsass (gulp-sass)

gulp-sass需要知道在哪里可以找到由@import指令指定的文件。您可以尝试在 gulp-sass 中设置includesPath选项以指向您本地的 susy 副本。

当我用凉亭安装 susy 时，我有这样的东西：

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

gulp.task('sass', function () {
  return gulp.src(config.src)
    .pipe(sass({
      includePaths: [
        'bower_components/susy/sass'
      ]
    }))
    ...
});
于 2015-02-11T23:52:10.527 回答
1

我遇到了同样的问题，但使用 Grunt 而不是 Gulp。

你可以做的是使用 susy 的完整路径。

首先找出您的 gem 的安装位置（gem env，然后查找GEM PATHS；在我的情况下，它们在哪里/Library/Ruby/Gems/2.0.0）。

然后在你的 style.scss 文件中，而不是@import susy你这样做：

@import "/Library/Ruby/Gems/2.0.0/gems/susy-2.2.2/sass/susy";

（将 2.2.2 替换为您的 susy 版本，但如果您要使用 libsass，您应该使用最新版本；升级时您必须更改该行...）

没有那么优雅，但使用 libsass 需要付出很小的代价。

更新：如果你把includePaths: ['/Library/Ruby/Gems/2.0.0/gems/susy-2.2.2/sass']你的 Gulp 任务放进去，你可以只用“ @import susy;”，尽管你只是把不整洁的地方移到了别的地方。

正如此处的另一个答案中所解释的那样，使用 Bower 执行此操作可能更简洁，并为该项目安装本地 susy；但是由于我还没有使用 bower（我感到羞耻），所以我只是为我的所有项目使用了一个全局 susy 副本。

于 2015-02-12T08:04:12.637 回答