我在Foundation CLI上遇到了一些问题。我的自定义SCSS代码无法通过Gulpfile.js进行编译。有趣的是,当我在任何HTML文件或Foundation自己的SCSS文件中进行更改时,文件都会快速编译。但是,当我编写自己的SCSS代码时,它不会编译。我的gulpfile.js可能有问题
我使用Foundation CLI版本2.2.5,节点为v10.16.1。
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var $ = require('gulp-load-plugins')();
var autoprefixer = require('autoprefixer');
var sassPaths = [
'node_modules/foundation-sites/scss',
'node_modules/motion-ui/src'
];
function sass() {
return gulp.src('scss/app.scss')
.pipe($.sass({
includePaths: sassPaths,
outputStyle: 'compressed' // if css compressed **file size**
})
.on('error', $.sass.logError))
.pipe($.postcss([
autoprefixer({ Browserlists: ['last 2 versions', 'ie >= 9'] })
]))
.pipe(gulp.dest('css'))
.pipe(browserSync.stream());
};
function serve() {
browserSync.init({
server: "./"
});
gulp.watch("scss/*.scss", sass);
gulp.watch("*.html").on('change', browserSync.reload);
}
gulp.task('sass', sass);
gulp.task('serve', gulp.series('sass', serve));
gulp.task('default', gulp.series('sass', serve));