Question

我毫不怀疑其他人已经开始工作......我现在还没有完全弄明白。

咕嘟咕嘟

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";

Gulp Running

[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 with v0.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副本。

当我用凉亭安装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 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，您应该使用最新的东西;并且您在升级时必须更改该行...）< / p>

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

更新：如果您将includePaths: ['/Library/Ruby/Gems/2.0.0/gems/susy-2.2.2/sass']放入您的Gulp任务中，您可以使用＆＃34; @import susy;＆＃34;，尽管您只是感动了凌乱在其他地方。

与Bower合作可能比较简洁，正如此处的另一个答案中所解释的那样，并为该项目安装了当地的susy;但由于我还没有使用凉亭（对我感到羞耻），我只是在我的所有项目中使用全球的susy副本。

Libsass与Susy不工作+ Gulp

2 个答案: