Question

我想从less转换为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']);

相关文件夹＆amp;文件

├── 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;
  }
}

在通过gulp

之后

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

希望这能让你走上正轨。

sass文件不是由gulp编译的

1 个答案: