javascript - Gulp 没有将 SCSS 转换为 CSS
问题描述
我无法让 gulp 自动将我的 SASS 代码编译成 CSS。我错过了什么?
文件结构:
public
-css
--styles.css
-index.html
sass
-styles.scss
gulpfile.js
package.json
吞咽文件:
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']);
包.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());
});
推荐阅读
- redis - 使用 helm 图表的 bitnami redis 集群 tls 连接的权限被拒绝错误?
- html - 如何将徽章与 CSS 中的列表项对齐
- javascript - React fetch post,页面刷新,变成GET请求
- azure - Azure Function App 是否支持 Python 3.9?
- javascript - 当动态呈现的 Iframe 以反应结束时运行事件的正确方法
- amazon-web-services - 在已删除实例时删除 AWS 卷?
- r - 如何用 4 个级别总结一个因素
- registry - 将值写入存储在 Inno Setup 中的数组中的所有注册表项
- rpgle - 在 RPG 中以 2 位小数显示双精度数?
- mysql - 如何计算mysql中嵌套表架构的百分比