Sass Susy不工作的Libsas+吞咽

我毫不怀疑其他人也能做到这一点。。。我只是还没弄清楚现在该怎么做

吞咽

无礼

大口跑步

我已经安装了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('./'))
});

注意上面的代码在使用GulpRuby时不起作用-sass@1.0.0alpha“它只能在V0.7.1中工作`

package.json

如何让susy正确工作并能够编译成css？

我已经设法让susy使用libsass gulp sass

gulp sass需要知道在哪里可以找到用@import指令指定的文件。您可以尝试在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'
      ]
    }))
    ...
});

我设法让苏西和Libsas一起工作

gulp sass需要知道在哪里可以找到用@import指令指定的文件。您可以尝试在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'
      ]
    }))
    ...
});

---

我也有同样的问题，只是咕噜而不是咕噜

您可以使用susy的完整路径

首先找出gem安装在gem env的位置，并查找gem路径；在我的例子中，它们位于/Library/Ruby/Gems/2.0.0中

然后在style.scss文件中，而不是在@import susy中执行以下操作：

为您的susy版本替换2.2.2，但是如果您要使用libsass，您应该使用一些非常最新的东西；当你升级时，你必须改变这一行

没有那么优雅，但使用Libsas需要付出很小的代价

更新：如果您将includePath:['/Library/Ruby/Gems/2.0.0/Gems/susy-2.2.2/sass']放在您的Gulp任务中，您只需@import susy；，就可以轻松完成；，虽然你只是把不整洁搬到了别的地方

---

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

我也遇到了同样的问题，只是咕噜而不是咕噜

您可以使用susy的完整路径

首先找出gem安装在gem env的位置，并查找gem路径；在我的例子中，它们位于/Library/Ruby/Gems/2.0.0中

然后在style.scss文件中，而不是在@import susy中执行以下操作：

为您的susy版本替换2.2.2，但是如果您要使用libsass，您应该使用一些非常最新的东西；当你升级时，你必须改变这一行

没有那么优雅，但使用Libsas需要付出很小的代价

更新：如果您将includePath:['/Library/Ruby/Gems/2.0.0/Gems/susy-2.2.2/sass']放在您的Gulp任务中，您只需@import susy；，就可以轻松完成；，虽然你只是把不整洁搬到了别的地方

---

正如下面的另一个答案所解释的那样，使用Bower并在本地为项目安装susy可能更整洁；但是，由于我还没有使用bower，我感到很惭愧，我只是在我的所有项目中使用了一个全局susy副本。

也许我需要在bower中使用它，但这似乎非常符合逻辑。我正在使用类似的设置，并试图从我的节点包中包含它。但是我的文件名为_susy.scss，所以我想可能需要将@import改为_susy。我的项目设置是这样的：node_modules-susy-sass，所以我尝试了使用gulp.js作为根目录。loadincludePaths:['./node_modules/susy/sass/']嗯，我喜欢这个想法，但是。。。我就是无法让它工作。Sass部分的前缀是下划线，因此在_susy.scss的情况下，您仍然会使用@import susy；。请记住，gulp sass包含路径的选项是includePaths，而不是loadincludePaths。也许可以为你的吞咽任务完整地创建一个要点？我的错，我实际上没有与_susy一起进行包含，我相信如果我有它，就会说它找不到susy。事实上，到目前为止，改变为includePaths正是它对我起作用的原因。如果你阅读另一个答案上的评论，你会看到我目前的处境。@Robin Pyon Why not work@import susy；但是它很好用-@import？也许我需要将它与鲍尔一起使用，但这似乎非常符合逻辑。我正在使用类似的设置，并试图从我的节点包中包含它。但是我的文件名为_susy.scss，所以我想可能需要将@import改为_susy。我的项目设置是这样的：node_modules-susy-sass，所以我尝试了使用gulp.js作为根目录。loadincludePaths:['./node_modules/susy/sass/']嗯，我喜欢这个想法，但是。。。我就是无法让它工作。Sass部分的前缀是下划线，因此在_susy.scss的情况下，您仍然会使用@import susy；。请记住

---

吞咽sass以包含路径是includePaths而不是loadincludePaths。也许可以为你的吞咽任务完整地创建一个要点？我的错，我实际上没有与_susy一起进行包含，我相信如果我有它，就会说它找不到susy。事实上，到目前为止，改变为includePaths正是它对我起作用的原因。如果你阅读另一个答案上的评论，你会看到我目前的处境。@Robin Pyon Why not work@import susy；但是它很好用-@import？这让我克服了苏西的错误。。。当然可以然而，当我开始想使用susy mixin例如@include span时，它不会识别span。。。我觉得很奇怪，真奇怪。请您发布您的准确导入和准确错误，好吗？Inside style.sccs'我正在使用：@import susy；在我的gulp文件includePath内：['./节点_模块/susy/sass']`来自@include border box size的第一个错误；错误：没有mixin命名的边框框大小都将确实工作。但我只是在他第一个回答时选择了他的；这让我克服了苏西的错误。。。当然可以然而，当我开始想使用susy mixin例如@include span时，它不会识别span。。。我觉得很奇怪，真奇怪。请您发布您的准确导入和准确错误，好吗？Inside style.sccs'我正在使用：@import susy；在我的gulp文件includePath内：['./节点_模块/susy/sass']`来自@include border box size的第一个错误；错误：没有mixin命名的边框框大小都将确实工作。但我只是在他第一个回答时选择了他的；不是直接在主题上，但可能有帮助，我得到了。不是直接在主题上，但可能有帮助，我得到了。

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

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

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

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

@import "/Library/Ruby/Gems/2.0.0/gems/susy-2.2.2/sass/susy";