Не работает background-image в gulp

Question

Всем доброго дня! Пишу проект, нужно добавить на бэк картинку, но background-image не отображается даже в браузере. Использую Gulp и SCSS. Заметил такую особенность, что при конвертировании scss в css, к классу, к которому я цепляю бэкграунд, добавляется класс .no-webp Прикладываю код и скриншоты.

gulpfile.js, основной файл gulp

import gulp from "gulp";
import { path } from "./gulp/config/path.js";
import { plugins } from "./gulp/config/plugins.js";


global.app = {
    isBuild: process.argv.includes('--build'),
    isDev: !process.argv.includes('--build'),
    path: path,
    gulp: gulp,
    plugins: plugins
}

import { copy } from "./gulp/tasks/copy.js";
import { reset } from "./gulp/tasks/reset.js";
import { html } from "./gulp/tasks/html.js";
import { server } from "./gulp/tasks/server.js";
import { scss } from "./gulp/tasks/scss.js";
import { js } from "./gulp/tasks/js.js";
import { images } from "./gulp/tasks/images.js";
import { otfToTtf, ttfToWoff, fontsStyle } from "./gulp/tasks/fonts.js";
import { svgSprive } from "./gulp/tasks/svgSprive.js";
import { zip } from "./gulp/tasks/zip.js";

function watcher () {
    gulp.watch(path.watch.files , copy );
    gulp.watch(path.watch.html , html );
    gulp.watch(path.watch.scss , scss );
    gulp.watch(path.watch.js , js );
    gulp.watch(path.watch.images , images );
}

export { svgSprive }
export { deployZIP }

const fonts = gulp.series(otfToTtf, ttfToWoff, fontsStyle);

const mainTasks = gulp.series(fonts, gulp.parallel(copy, html, scss, js, images));

const dev = gulp.series(reset, mainTasks, gulp.parallel(watcher, server));

const deployZIP = gulp.series(reset, mainTasks, zip);

gulp.task('default', dev);

файл image.js, через который идёт обработка изображений галпом

import imagemin from "gulp-imagemin";

export const images = () => {
    return app.gulp.src(app.path.src.images)
    .pipe(app.plugins.plumber(
        app.plugins.notify.onError({
            title: "IMAGES",
            message: "Error: <%= error.message %>"
        })
    ))
    .pipe(app.plugins.newer(app.path.build.images))
    .pipe(app.gulp.src(app.path.src.images))
    .pipe(app.plugins.newer(app.path.build.images))
    .pipe(imagemin({
        progressive: true,
        svgoPlugins: [{ removeViewBox: false }],
        interlaced: true,
        optomozationLevel: 3
    }))
    .pipe(app.gulp.dest(app.path.build.images))
    .pipe(app.gulp.src(app.path.src.svg))
    .pipe(app.gulp.dest(app.path.build.images))
    .pipe(app.plugins.browsersync.stream());
}

Пути в SCSS, всё корректно, он видит картинку

Вот что получаю на выхлопе в CSS

А вот что видит браузер, точнее, не видит вообще

Answer 1

Как у вас написано в инструкции scss так и работает, Gulp тут вообще не причем. Класс .no-webp не просто так добавляется. У вас не весь код, но &__wrapper-items { явно дает понять, что перед & добавится то, во что вложена эта инструкция.

Допустим вот код:

.class1 {
   .class2 {
      &__b {
        border: 0;
      }
   }
}

То на выходе получится:

.class1 .class2__b {border:0;}

Если не хотите, чтобы class2 лежал в class1, то надо его перенести из class1

И скорее всего у вас также есть выше уровнем нужный класс &__wrapper-items просто вы добавили background-image не в том месте, scss кода, поэтому у вас нет в браузере этой строчки.

Точнее можно сказать, если увидеть весь scss код.

Ну и как дополнение: кеш браузера сбросился? новый сгенерированный файл css точно выгрузился на сервер?

БЛОГ НА HUSL

Не работает background-image в gulp

Ответы (1 шт):