1

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

我什至在对我的 scss 文件进行基本编译时都遇到了问题。我曾尝试使用gulp-sass、gulp-ruby-sass和gulp-compass插件进行 gulp 并且每次都会收到几乎相同的错误消息：

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

所以看起来它一碰到指南针mixin就会掉下来。我在我的电脑上安装了 ruby​​，compass 版本为 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'));
});

任何想法如何告诉它我的指南针副本安装在哪里？我以为它是全局安装的。

4

3 回答 3

5

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

  • gulp-ruby-sass：是命令行工具的包装器：语言附带的sass 。它是用 Ruby 编写的，通过 gem 安装- Ruby 的包管理器。

  • gulp-compass：是命令行工具的包装器：Compass框架附带的指南针。它是用 Ruby 编写的，也可以通过 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))
})
于 2016-10-27T19:26:20.003 回答
4

没错，compass应该在您的系统上全局安装以完成这项工作，至少很容易。我建议您卸载 sass 和 compass 以使用

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'));

});
于 2014-07-19T11:31:03.550 回答
1

请注意，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'));
});
于 2015-09-16T05:59:03.167 回答