代码之家 › 专栏 › 技术社区 › Jamie Hutber

Susy不工作的Libsass+Gulp

libsass susy gulp sass

Jamie Hutber · 技术社区 · 10 年前

我毫不怀疑其他人已经做到了。。。我现在还没有完全弄清楚怎么做。

吞咽

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/

我已安装susy@2.2.2在根部沿着侧面 gulp 文件包含以下内容: 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 版本0.7.1`

包.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 ?

2 回复 | 直到 10 年前

Robin Pyon 10 年前

我设法得到了苏西使用 利比亚人 (大口大口)

狼吞虎咽 需要知道在何处查找使用 @import 指令。您可以尝试设置 includesPath 选择gulp sass指向您的本地susy副本。

当我用bower安装susy时,我有这样的东西:

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

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

yivi SilverLink 10 年前

我也有同样的问题,但我选择了格朗特而不是古尔普。

你可以使用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,则应使用最新版本;升级时必须更改该行…)

虽然没有那么优雅,但使用libsas的代价很小。

使现代化 :如果您将 includePaths: ['/Library/Ruby/Gems/2.0.0/gems/susy-2.2.2/sass'] 在你的Gulp任务中,你只需“ @import susy; “,虽然你只是把不留余地搬到了别的地方。

正如下面的另一个答案中所解释的那样,与Bower合作可能会更方便,并且为该项目安装本地susy;但由于我还没有使用bower(我感到羞愧),我只在所有项目中使用一个全局susy副本。