css - sass 文件不是由 gulp 编译的

Question

我想从 less 切换到 sass，所以我用 npm 安装了 gulp-sass 并修改了我的 gulpfile 来编译 sass 而不是 less(没有其他改变)。遗憾的是，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

终端响应:

开始 gulp :

[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 通过 gulp 运行后

$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 文件和已编译的文件创建不同的文件夹。

希望这能让您走上正轨。