Question

我无法完全自动将SASS代码编译为CSS。我想念什么？

文件结构：

public
-css
--styles.css
-index.html
sass
-styles.scss
gulpfile.js
package.json

Gulpfile：

var gulp = require('gulp'),
    browserSync = require('browser-sync').create(),
    sass = require('gulp-sass');

  gulp.task('serve', function() { browserSync.init({ server: "./public" });

  gulp.watch("scss/**/*.scss", ['sass']);
  gulp.watch("public/*.html").on('change', browserSync.reload);

});

gulp.task('sass', function() {
return gulp.src("scss/styles.scss")
  .pipe(sass().on('error', sass.logError))
  .pipe(gulp.dest("public/css/styles.css"))
  .pipe(browserSync.stream());
});

gulp.task('default', ['sass', 'serve']);

Package.json：

{
  "name": "gulptest",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "autoprefixer": "^9.3.1",
    "browser-sync": "^2.26.3",
    "cssnano": "^4.1.7",
    "gulp-postcss": "^8.0.0",
    "gulp": "^3.9.1",
    "gulp-sourcemaps": "^2.6.4"
  },
  "devDependencies": {
    "gulp-sass": "^4.0.2"
  },
  "scripts": {
    "dev": "gulp"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Answer 1

您有两个问题：

正如@cale_b所说，您正在查看错误的目录，并且sass任务中的源是错误的。所以用这个：

gulp.task('serve', function() { browserSync.init({ server: "./public" });

  //gulp.watch("scss/**/*.scss", ['sass']);
  gulp.watch("sass/**/*.scss", ['sass']);

  gulp.watch("public/*.html").on('change', browserSync.reload);  
});

gulp.task('sass', function() {

  //return gulp.src("scss/styles.scss")
  return gulp.src("sass/styles.scss")

   .pipe(sass().on('error', sass.logError))

   // and dest takes directories only, not file names
   // sass will automatically produce styles.css
   .pipe(gulp.dest("public/css"))

   .pipe(browserSync.stream());
});

Answer 2

这是我工作的gulp sass设置：

gulp.task('sass', function() {
  gulp.src('scss/*.scss')
          .pipe(sass())
          .pipe(gulp.dest('public/css/'));
});
gulp.task('watch', function(){
  gulp.watch(['scss/*.scss'], ['sass']);
});

似乎具有源冗余，但是可以。

Gulp没有将SCSS转换为CSS

2 个答案: