Question

这可能是一些愚蠢的错误，但我无法看到它！我的gulp无法编译我的scss。好像我给了他错误的目录，但这是第一件要检查的事情。没有错误。一切似乎都好，但它不起作用。我的Gulpfile有这个重要的部分：

gulp.task('styles-dev', function() { 
return gulp.src('src/scss/*.scss')
.pipe(plumber())
.pipe(sass({ style: 'expanded' }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
.pipe(gulp.dest('dist/css/'));
});

文件夹结构：

root < here is gulpfile
  dist
      css
  inc 
  node_modules
  src
      js
      scss

Answer 1

我会从有用的东西开始...例如：

'use strict';

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

gulp.task('styles-dev', function () {
  return gulp.src('src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/css/'));
});

此代码也会添加错误记录，因此应该更容易跟踪可能的错误......

然后，一旦看到它正常工作，您就可以开始添加其他选项和组件（style，plumber，autoprefixer，...）。

Answer 2

首先，您有几个语法错误：

假设您的sass需要gulp-sass，您就会输入错误：说outputStyle代替style
假设您的autoprefixer需要gulp-autoprefixer，您的语法错误（请参阅https://github.com/postcss/autoprefixer#usage）。它应该有{ browsers: [] }，“最后2个版本 s ”和大小写。我认为这样可行：

.pipe(autoprefixer({ browsers: ['last 2 versions', 'Safari 5', 'IE 8', 'IE 9', 'Opera 12.1'] }))

（很明显，这将支持所有主流浏览器的两个最新版本PLUS Safari 5，IE 8＆amp; 9和Opera 12.1。如果这不是您想要支持的，请查看{{ 3}}）

完成这些修补后，请将错误记录添加到plumber：将.pipe(plumber())替换为

.pipe(plumber({
  errorHandler: function (error) {
    console.log(error.message);
    this.emit('end');
}}))

如果您仍有问题，请告诉我们控制台中记录的错误，我们可以帮助您进行调试！

Gulp无法看到scss

2 个答案: