有苏西不工作的Libsass

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

杯式运行

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

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

电流工作装置与gulp

不过，我确实让它正常工作，这证实了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)合作。

gulp需要知道在哪里可以找到由@import指令指定的文件。您可以尝试将includesPath选项设置为gulp，以指向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

我也有同样的问题，但与格伦特，而不是古普。

你可以为苏西使用完整的路径。

首先找出安装宝石的位置(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。

Update：如果您将includePaths: ['/Library/Ruby/Gems/2.0.0/gems/susy-2.2.2/sass']放入您的Gulp任务中，您可以只使用"@import susy;"，尽管您只是将不整洁移到了其他地方。

使用Bower (在下面的另一个答案中解释过)并为该项目安装本地susy可能会更整洁；但是由于我还没有使用bower (我感到羞耻)，所以我只在我的所有项目中使用了一个全局的susy副本。