Question

我正在尝试gulp作为Grunt的替代构建工具，将我的scss编译为css，因为我听说它可以更快。

我甚至在编写scss文件的基本编译时遇到了问题。我尝试使用 gulp-sass ， gulp-ruby-sass 和 gulp-compass 插件进行吞咽，我得到了几乎相同的错误每次都有消息：

error screen.scss (Line 2 of _grid.scss: Undefined mixin 'box-sizing'.)

所以它看起来就像它击中罗盘混合物一样掉下来。我在我的电脑上安装了ruby，指南针版本为1.0.0.alpha.19，sass版本为3.3.7。

这是我的gulpfile：

var gulp = require('gulp'),
compass = require('gulp-compass'),
sass = require('gulp-ruby-sass');

gulp.task('compass', function() {
gulp.src('../sass/UK/screen.scss')
.pipe(compass({
    css: '../css',
    sass: '../sass',
  sourcemap: true,
  style: 'compressed'
}))
.pipe(gulp.dest('../css/UK/screen.css'));
});

gulp.task('sass', function () {
  gulp.src('../sass/UK/**/*.scss')
      .pipe(sass({ style: 'compressed', sourcemap: true }))
      .pipe(gulp.dest('../css/UK'));
});

我是如何告诉它我的罗盘副本安装在哪里的？我以为它是全球安装的。

Answer 1

使用Compass和Gulp有点混乱。有三个gulp扩展： gulp-ruby-sass ， gulp-compass 和 gulp-sass 。他们基本上做同样的事情。他们将SASS编译为CSS。但是：

gulp-ruby-sass：是语言附带的命令行工具： sass 的包装器。它是用Ruby编写的，它是installed via gem - Ruby的包管理器。
gulp-compass：是Compass框架附带的命令行工具：指南针的包装器。它是用Ruby编写的，它也是installed via gem。但是，Compass只是一个框架。它仅包含SASS文件。所有 compass 命令都是将框架SASS文件的路径设置为 sass 命令，以便正在解析Compass依赖关系。
gulp-sass：是工具的包装器： node-sass ，它是Node.JS绑定到libsass：Sass编译器的C / C ++实现

上述答案对我不起作用，因为我使用 gulp-sass 。它没有看到开箱即用的Compass文件。首先我安装了compass-mixins（Compass框架的SASS文件），后来我用compass-importer导入了它们：

import compass from 'compass-importer';
import sass from 'gulp-sass';

gulp.task('styles', function () {
  return gulp.src(config.styles.src)
    .pipe(sass({
      importer: compass
    })
    .pipe(gulp.dest(config.styles.dest))
})

Answer 2

你说得对，compass应该全局安装在你的系统上，以便至少轻松地完成这项工作。我建议您使用

卸载sass和指南针以获得干净的东西

gem uninstall sass && gem uninstall compass

然后重新安装它们：

gem install sass
gem install compass --pre

之后你可以定义一个像这样的gulp任务

gulp.task('compass', function () {

  return gulp.src('../sass/UK/screen.scss')
    .pipe(sass({ compass: true, sourcemap: true, style: 'compressed' }))
    .pipe(gulp.dest('../css/UK/screen.css'));

});

Answer 3

请注意，gulp-ruby-sass有一个新的语法，如下所示：

gulp.task('compass', function () 
  sass(../sass/UK/screen.scss, { compass: true, sourcemap: true, style: 'compressed' })
  .pipe(gulp.dest('../css/UK/screen.css'));
});

Gulp似乎无法找到指南针混合物

3 个答案: