Gulp 没有将 SCSS 转换为 CSS答案

【问题标题】：Gulp not transpiling SCSS into CSSGulp 没有将 SCSS 转换为 CSS
【发布时间】：2018-11-02 02:05:17
【问题描述】：

我无法让 gulp 自动将我的 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"
}

【问题讨论】：

您收到什么错误？
你在看"scss/**/*.scss"，但你的文件结构是sass/styles.scss....你应该看sass/*.scss吗？
我没有收到任何错误... browserSync 工作正常。但是当我编写 SASS 代码时，它不会监视和自动为我编写 CSS。非常令人沮丧。我试过看 sass/*.scss 也没有运气。

标签： javascript npm gulp

【解决方案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());
});

【讨论】：

你的代码被注释掉了——后面是我的代码。 scss -> sass 在这两种情况下，因为您使用的是 sass/styles.scss 而不是 scss/styles.scss

【解决方案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']);
});

它似乎有源冗余，但它有效。

【讨论】：