gulp + browser-syn c + s css объединяет новые свойства вместо замены всего класса - PullRequest
Новая
       53

gulp + browser-syn c + s css объединяет новые свойства вместо замены всего класса

0 голосов
/ 31 марта 2020

У меня 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'));
...