У меня gulp + browser-syn c + настройка sass. Ниже мой gulpfile.babel. js source.
Проблема, с которой я столкнулся, заключается в том, что при обновлении одного из файлов s css browser-syn c объединяет новые свойства вместо замены целого CSS учебный класс. Например, у меня есть:
.classname {
border: 1px solid red;
float: left;
}
и свойство border
remove, поэтому класс становится:
.classname {
float: left;
}
То, что я вижу на панели разработчика, выглядит так, как будто мне нужно .classname
классы одновременно и border
свойство не удалено.
Вот мой список ошибок:
import gulp from 'gulp';
import sass from 'gulp-sass';
import browserSync from 'browser-sync';
import sourcemaps from 'gulp-sourcemaps';
const bs = browserSync.create();
const compileScss = function (done) {
gulp.src('layout/scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
includePaths: ["scss", "node_modules"],
outputStyle: "expand"
}))
.on("error", sass.logError)
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('layout/css'))
.pipe(bs.reload({stream: true}));
done();
};
const startServer = function (done) {
bs.init({
server: {
baseDir: "./layout/"
},
logLevel: "debug",
notify: true
});
done();
};
const watchSources = function (done) {
gulp.watch(["layout/scss/**/*.scss"], gulp.series('sass'));
};
gulp.task('sass', compileScss);
gulp.task('browser-sync', startServer);
gulp.task('watch', watchSources);
gulp.task('default', gulp.series('sass', 'browser-sync', 'watch'));