我无法将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"
}
最佳答案
您有两个问题:
正如@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());
});
关于javascript - Gulp没有将SCSS转换为CSS,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53103318/