BrowserSync не видит стили (локально всё отображается)

120
18 октября 2021, 05:40

Настроила BrowserSync, стили на нём подгружаются лишь при нахождении html-файла в папке над css. При размещении в соседнюю папку - отключаются (локально в браузере видны в любом расположении).

То есть, при построении проекта с html в корневой папке и путём в подключении стилей "styles/styles.css" всё работает и локально в браузере, и при запуске Sync-сервера.

При размещении проекта в соседней папке с путём "../styles/styles.css" стили видны только локально в браузере, сервер Sync-а их не отображает.

С этим вариантом директории отображаются, при "build/pages" - нет.

'use strict';
var gulp = require('gulp'),
    pug = require('gulp-pug'),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    notify = require("gulp-notify"),
    browserSync = require('browser-sync').create();
gulp.task('serve', function() {
    browserSync.init({
        server: {
            baseDir: "./build"    //при замене на "./build/pages" стили не видны
        }
    });
    browserSync.watch('build', browserSync.reload)
});
sass.compiler = require('node-sass');
gulp.task('pug', function() {
    return gulp.src('src/pug/pages/*.pug')
        .pipe(pug({
            pretty:true
        }))
        .pipe(gulp.dest('build'));    //тут тоже должно собираться в "build/pages"
});
gulp.task('sass', function() {
    return gulp.src('src/static/scss/*.scss')
        .pipe(sass.sync().on('error', sass.logError))
        .pipe(autoprefixer({
            cascade: false
        }))
        .on("error", notify.onError({
            message: "Error: <%= error.message %>",
            title: "Error styles file"
        }))
        .pipe(gulp.dest('build/styles'))
});
gulp.task('watch', function() {
    gulp.watch('src/static/scss/*.scss', gulp.parallel('sass')); 
    gulp.watch('src/pug/pages/*.pug', gulp.parallel('pug')); 
});
gulp.task('default', gulp.series(
    gulp.parallel('pug', 'sass'),
    gulp.parallel('watch', 'serve')
));

В чём может быть проблема? Нагуглить не удалось, в вопросах подобной проблемы с путями не нашла. Делала по видеосборке с ютуба, там просто в корневую папку положили.

READ ALSO
Аналог webkit-fill-available для Firefox

Аналог webkit-fill-available для Firefox

Мне нужно чтобы блок Child Div был по высоте как Parent DIV, но не превышал егоДля этого я прописал:

92
Как стилизовать input [type=&#39;submit&#39;]? С помощью JS или CSS

Как стилизовать input [type='submit']? С помощью JS или CSS

Подскажите пожалуйста, каким образом можно из input[type=submit] сделать кнопку вот как эта?

163
Приклеить div к низу экрана

Приклеить div к низу экрана

Есть div с результатом подсчета калькулятора (#grid-15-15)Нужно этот div "приклеить" к низу экрана, чтобы он оставался там и прокручивался вместе со страницей,...

203
Кнопка внутри кнопки

Кнопка внутри кнопки

Подскажите есть возможность создать кнопку внутри кнопки и чтобы логика у них была разная? Не нашел примеровНе судите строго начинающих...

154