Libsass with Susy не работает + Gulp

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

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

текущей рабочей установкой с глотком-рубинового дерзости

я тем не менее он работает, что подтверждает, что суперсимметрия работает через драгоценный камень установлен с следующий код:

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

мне удалось получить сУсИ работы с libsass (проглатывать-дерзость)

Глоток-дерзость должен знать, где найти файлы, указанные с @import директивы. Вы можете попробовать установить опцию includesPath в gulp-sass, чтобы указать на вашу местную копию susy.

Как я установил сУсИ с дачей, у меня есть что-то вроде этого:

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

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

Answer 2

Я была такая же проблема, но с Грантом вместо Глоток.

Вы можете использовать полный путь для 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 для вашей версии суперсимметрии, но если вы собираетесь использовать libsass вы должны использовать что-то совсем в на сегодняшний день, и вам придется изменить эту строку при обновлении ...)

Не такая элегантная, но небольшая цена для оплаты использования libsass.

Update: Если поставить includePaths: ['/Library/Ruby/Gems/2.0.0/gems/susy-2.2.2/sass'] в вашей Глоток задачи вы можете уйти с просто «@import susy;», хотя вы просто переместил untidyness где-то в другом месте.

Скорее всего, это возможно сделать с помощью Bower, как объяснено в другом ответе здесь, и установить локальную установку susy для проекта; но поскольку я еще не использую беседу (позор на мне), я просто использую глобальную копию для всех моих проектов.