sass 文件未由 gulp 编译

Question

我想从 less 切换到 sass 所以我用 npm 安装了 gulp-sass 并修改了我的 gulp 文件来编译 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

终端响应：

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

希望这能让您走上正轨。

sass 文件未由 gulp 编译

sass file not compiled by gulp

css

sass

node.js

npm

gulp