Libsass с Susy не работает + 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'))
});

Сасс

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

Я установил [email protected] в корень вместе с файлом gulp со следующим: gem install susy

Текущая рабочая настройка с gulp-ruby-sass

Однако у меня он работает, что подтверждает, что 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('./'))
});

ПРИМЕЧАНИЕ Приведенный выше код не будет работать при использовании [email protected]' 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?


sass gulp susy libsass
person Jamie Hutber    schedule 05.02.2015    source источник
comment
Не совсем по теме, но, возможно, полезно, я получил susy и libsass, работающие с ember- Кли.   -  person steveax    schedule 13.02.2015

Ответы (2)


arrow_upward
4
arrow_downward

Мне удалось заставить susy работать с libsass (gulp-sass)

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

Поскольку я установил susy с помощью Bower, у меня получилось что-то вроде этого:

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

gulp.task('sass', function () {
  return gulp.src(config.src)
    .pipe(sass({
      includePaths: [
        'bower_components/susy/sass'
      ]
    }))
    ...
});
person Robin Pyon    schedule 11.02.2015
comment
Возможно, мне нужно использовать его с Bower, но это кажется очень логичным imo :). Я использую аналогичную настройку и пытаюсь включить ее из своего пакета узла. Однако мой файл называется _susy.scss, поэтому я подумал, что, может быть, мне нужно изменить @import на _susy. Настройка моего проекта выглядит следующим образом › node_modules¬susy¬sass поэтому у меня есть tried this with my gulp.js в корневом каталоге. loadincludePaths: [ './node_modules/susy/sass//' ] Ммм, мне нравится идея, однако... Я просто не могу заставить ее работать. - person Jamie Hutber; 12.02.2015
comment
Частицы Sass имеют префикс подчеркивания, поэтому в случае _susy.scss вы все равно должны использовать @import "susy";. Помните, что опция gulp-sass для включения пути — includePaths, а не loadincludePaths. Возможно, создать суть вашей задачи gulp целиком? - person Robin Pyon; 12.02.2015
comment
Плохо, я на самом деле не включил _susy, я думаю, что если бы я это сделал, он бы выдал ошибку, говоря, что не может найти susy. Действительно, переход на includePaths заставил меня работать до сих пор. если вы прочитаете комментарии к другому ответу, вы увидите, где я сейчас нахожусь. - person Jamie Hutber; 16.02.2015
comment
@Robin Pyon Почему не работает @import "susy"; Но хорошо сработало - @import "_susy"; ? - person Юрий Светлов; 09.06.2016

arrow_upward
1
arrow_downward

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

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

Обновление: если вы поместите includePaths: ['/Library/Ruby/Gems/2.0.0/gems/susy-2.2.2/sass'] в свою задачу Gulp, вы можете обойтись просто "@import susy;", хотя вы просто переместили неопрятность в другое место.

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

person yivi    schedule 12.02.2015
comment
Это избавило меня от ошибки susy... конечно... Однако, когда я начал хотеть использовать susy mixins, например, @include span, он не распознал диапазон... Что я действительно нахожу странным. - person Jamie Hutber; 13.02.2015
comment
Это странно. Не могли бы вы опубликовать свой точный импорт и точную ошибку, пожалуйста? - person yivi; 13.02.2015
comment
Внутри style.sccs' I'm using: @import "susy"; inside my gulp file includePaths: ['./node_modules/susy/sass']` Первая ошибка из @include border-box-sizing; Ошибка Error: no mixin named border-box-sizing - person Jamie Hutber; 15.02.2015
comment
Оба действительно будут работать. Но я выбрал только его, так как он ответил первым ;) - person Jamie Hutber; 16.02.2015