Gulp似乎找不到指南针mixins

Question

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

我甚至无法对我的scss文件进行基本编译。我已经尝试对gulp使用gulp-sass，gulp-ruby-sass和gulp-compass插件，但每次都会得到几乎相同的错误消息：

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

因此，当它碰到罗盘mixin时，它似乎就掉下来了。我在PC上安装了红宝石，其指南针版本为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编写的，并且是通过gem -Ruby的包管理器安装的。

• 一饮而尽罗盘：大约是命令行工具的包装：指南针自带指南针框架。它是用Ruby编写的，也可以通过gem安装。但是，指南针只是一个框架。它仅包含SASS文件。指南针命令所做的全部工作就是将框架SASS文件的路径设置为sass命令，以便解决Compass依赖关系。

• gulp-sass：是工具：node-sass的包装，它是Node.JS绑定到libsass的工具：Sass编译器的C / C ++实现。

由于我使用的是gulp-sass，因此上述答案对我不起作用。它没有开箱即用的Compass文件。因此，首先我安装了指南针-mixins（Compass框架的SASS文件），然后又使用罗盘导入器将它们导入：

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