Question

我正在尝试用gulp-sass编译我的.scss文件。我正在使用Bourbon，Susy和Breakpoint。我已将它们全部安装为凉亭组件。

当我运行gulp sass任务时，我收到此错误：

events.js:85
  throw er; // Unhandled 'error' event
        ^
Error: sass/base/_buttons.scss
5:12  no mixin named appearance

外观是Bourbon mixin。我尝试过使用不同的方法来改变Bourbon的路径，包括在main.scss文件的@import语句中添加整个路径。如果路径不正确，gulp会抱怨无法找到该文件。所以看起来至少路径是正确的。

这是我的gulp文件：

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var bourbon = require('node-bourbon');
//bourbon.includePaths
bourbon.with('bower_components/bourbon')
var sourcemaps = require('gulp-sourcemaps');
var notify = require('gulp-notify');
var browserSync = require('browser-sync').create();

gulp.task('sass', function () {
   gulp.src('sass/**/*.scss')
    .pipe(sourcemaps.init())
      .pipe(sass({
      style: 'expanded',
      errLogToConsole: true,
      includePaths: require('node-bourbon').includePaths
      }))
     .pipe(prefix(
         'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'
     ))
     .pipe(sourcemaps.write('../maps'))
     .pipe(notify({
        message: 'Styles task complete'
    }))
    .pipe(gulp.dest('../css'));
    .pipe(browserSync.stream());
});


gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

以及我的package.json中的依赖项：

"devDependencies": {
"browser-sync": "^2.7.13",
"gulp": "^3.9.0",
"gulp-autoprefixer": "^2.3.1",
"gulp-minify-css": "^1.2.0",
"gulp-notify": "^2.2.0",
"gulp-sass": "^2.0.3",
"gulp-sourcemaps": "^1.5.2",
"node-bourbon": "^4.2.3"
}

这是我第一次尝试设置Gulp，所以非常感谢任何帮助。

Gulp-sass与波旁没有混合错误

0 个答案: