sass文件未由gulp编译

Question

我想从更少的切换到sass，所以我用npm安装了gulp-sass并修改了我的gulpfile以编译sass而不是更少（没有其他更改）。 遗憾的是，gulp不能将我的.scss文件编译为css，并且在谷歌搜索并尝试了所有我认为可能的文件后，仍然无法编译。 这是我可以向您显示的所有信息：

gulpfile.js

// GULP CONFIG

// REQUIRES
    // general
    var gulp = require('gulp');
    // css
    var sass = require('gulp-sass');
    var minifycss = require('gulp-minify-css');
    var autoprefixer = require('gulp-autoprefixer');
    var rename = require("gulp-rename");
    // watch
    var watch = require('gulp-watch');


// TASKS
    // css 
    gulp.task('css', function() {
            gulp.src('style.css')                                       // get the 'all-import' css-file
            // .pipe(sass({includePaths: ['./styles']}))
            // .pipe(sass().on('error', sass.logError))                 
            .pipe(sass())                                               // sass to css
            .pipe(autoprefixer('last 2 version', { cascade: false }))   // autoprefix
            .pipe(minifycss())                                          // minify
            .pipe(rename('style.min.css'))                              // rename to style.min.css
            .pipe(gulp.dest(''));                                       // output to root
    });

    // watch
    gulp.task('watch', function() {
      gulp.watch('styles/*', ['css']); 
    });


// RUN DEFAULT
gulp.task('default', ['watch']);

相关文件夹和文件

├── style.min.css
├── style.css (with @import styles/style.scss)
│    └── styles
│          ├── style.scss

终端响应：

初始吞咽：

[10:19:14] Starting 'watch'...
[10:19:14] Finished 'watch' after 11 ms
[10:19:14] Starting 'default'...
[10:19:14] Finished 'default' after 20 μs

保存style.scss之后

[10:19:20] Starting 'css'...
[10:19:20] Finished 'css' after 15 ms

style.scss （显然是出于测试目的的内容）

$color: #99cc00;

body {
  background-color: $color;
  .sub {
    color: $color;
  }
}

吞噬完后的style.min.css

$color:#9c0;body{background-color:$color;.sub{color:$color}

Answer 1

您不是在告诉gulp注意sass文件。 在这行上：

gulp.src('style.css')

您指定的是css文件，而不是scss文件。 将其更改为：

gulp.src('style.scss') // update, s missing

另外，没有指定输出路径。 这行：

.pipe(gulp.dest('')); 

应该包含您的命运路线，并且当前为空。

因此，对于根路由，这样的事情应该起作用：

.pipe(gulp.dest('./')); // or whatever route you want

无论如何，您的文件结构有点奇怪。

我认为，应该为sass文件和已编译的文件创建不同的文件夹。

希望这能使您走上正确的道路。