gulp + browser-sync + scss合并新的属性，而不是替换整个类。

Question

我有gulp + browser-sync + sass的设置，下面是我的gulpfile.babel.js源文件。

我的问题是，当我更新其中一个scss文件时，Browser-sync会合并新的属性，而不是替换整个CSS类。例如，我有

.classname {
   border: 1px solid red;
   float: left;
}

并删除 border 属性，所以该类就变成了。

.classname {
   float: left;
}

我在开发者面板上看到的是，好像我必须要 .classname 课堂上同时 border 财产未删除。

这是我的gulp列表。

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'));