带 Susy 的 Libsass 不工作 + Gulp

Question

我毫不怀疑其他人已经做到了这一点......我只是现在还没有完全弄清楚。

Gulp

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

Sass

@import "susy";

Gulp 运行

[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`

package.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？

Answer 1

我已经设法让 susy 与 libsass 一起工作（gulp-sass)

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

因为我用 bower 安装了 susy，所以我有这样的东西：

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

gulp.task('sass', function () {
  return gulp.src(config.src)
    .pipe(sass({
      includePaths: [
        'bower_components/susy/sass'
      ]
    }))
    ...
});

Answer 2

我有同样的问题，但使用 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 副本。

带 Susy 的 Libsass 不工作 + Gulp

Libsass with Susy not working + Gulp

sass

gulp

susy

libsass