Gulp을 활용해서 SCSS를 컴파일 한 후 section태그 부분에 들어갈 background image를 넣으려고 합니다. 이미지는 다운로드 받은 .jpg 파일이며 파일 이름은 "background.jpg"입니다.

제 html 파일은 다음과 같습니다.

경로: $ myproject/index.html

    <section id="home">
        <div class="home container">
            <div>
                <h1>Hello, My Name is Jessica</h1>
                <a href="#" type="button" class="cta">Portfolio</a>
            </div>
        </div>
    </section>

제 SCSS 파일은 다음과 같습니다.

경로: $ myproject/scss/style.scss CSS 경로: $ myproject/css/style.css

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 10px;
    font-family: 'Montserrat', sans-serif;
}

a { 
    text-decoration: none;
}

.container {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#home {
    background-image: url('..img/background.jpeg');
    background-size: cover;
    background-position: top center;
    position: relative;

    &:after {
        content:'';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background-color: black;
        opacity: .7;
    }
}

그리고 제 gulpfile.js는 다음과 같습니다.

경로: myproject/gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();

function style() {
    return gulp.src('./scss/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'))
        .pipe(browserSync.stream());
}

function watch() {
    browserSync.init({
        server: {
            baseDir: './'
        }
    });
    gulp.watch('./scss/**/*.scss', style);
    gulp.watch('./*.html').on('change', browserSync.reload);
    gulp.watch('./js/**/*.js').on('change', browserSync.reload);
}

exports.style = style;
exports.watch = watch;

CSS도 제대로 컴파일되어서 잘 나오는데 이상하게 background-image만 잘 나오지 않네요. 왜 그런걸까요? Gulp같은 경우에 이번에는 조금 바뀌어서 var가 아닌 function으로 전부 바꾸는게 좋다고 해서 바꿨습니다.