Что-то не так с моей функцией стилей или функцией наблюдателя в файле gulp - PullRequest
Новая
       29

Что-то не так с моей функцией стилей или функцией наблюдателя в файле gulp

1 голос
/ 24 февраля 2020

Что-то не так с моей функцией стиля или функцией наблюдателя в файле gulp.

Я предполагаю, что проблема возникает из-за того, что у меня есть партиалы в моем каталоге, и эти партиалы не импортирую при их обновлении. 

const gulp = require("gulp");
const sass = require("gulp-sass");
const sourcemaps = require("gulp-sourcemaps");
const browserSync = require("browser-sync").create();
const source = "./src";
const dest = "./build";
const del = require("del");

sass.compiler = require("node-sass");

async function clean(cb) {
  await del(`${dest}/css/*.css`);
  cb();
}

function html(cb) {
  gulp.src(`${dest}/**/*.html`);
  cb();
}

function js(cb) {
  gulp.src(`${dest}/**/*.js`);
  cb();
}

function styles(cb) {
  gulp
    .src(`${source}/sass/*.scss`)
    .pipe(sourcemaps.init())
    .pipe(
      sass({
        sourcemap: true,
        outputStyle: "expanded"
      }).on("error", sass.logError)
    )
    .pipe(gulp.dest(`${dest}/css/`))
    .pipe(browserSync.stream());
  cb();
}

// function css(cb) {
//   gulp.src(`${source}/sass/*.css`).pipe(gulp.dest(`${dest}/css/`));
//   cb();
// }

function watcher(cb) {
  gulp
    .watch(`${dest}/js/**/*.js`)
    .on("change", gulp.series(js, browserSync.reload));
  gulp
    .watch(`${source}/sass/**/*`)
    .on("change", gulp.series(styles, browserSync.reload));
  gulp
    .watch(`${dest}/**/*.html`)
    .on("change", gulp.series(html, browserSync.reload));
  // gulp.watch()
  cb();
}

function server(cb) {
  browserSync.init({
    notify: false,
    open: true,
    server: {
      baseDir: dest
    }
  });
  gulp
    .watch(`${dest}/js/**/*.js`)
    .on("change", gulp.series(js, browserSync.reload));
  gulp
    .watch(`${source}/sass/**/*`)
    .on("change", gulp.series(styles, browserSync.reload));
  gulp
    .watch(`${dest}/**/*.html`)
    .on("change", gulp.series(html, browserSync.reload));
  cb();
}

var build = gulp.series(
  clean,
  gulp.parallel(js, styles, html),
  server,
  watcher
);

gulp.task("default", build);

Это ошибка, которую я получаю: - 

Error in plugin "sass"
Message:
    src\sass\style.scss
Error: File to import not found or unreadable: variables.
        on line 1 of src/sass/style.scss
>> @import "variables";

Путь к моей файловой директории: -

Это мой каталог файлов

Отредактировано:

Вот _variable.s css

// Load Fonts

@import url(http://fonts.googleapis.com/css?family=Roboto+Slab|Merriweather|Josefin+Slab|Oswald|Bree+Serif);

$offwhite: #eee8d6;
$darkblue: #022933;
$yellow: #ffba00;
$blue: #0076a3;
$green: #548c27;
$orange: #f39856;
$red: #d143;
$purple: #6d73c2;

$color-main: $darkblue;
$color-backgrounds: $offwhite;
$color-headlines: $red;

$font-main: Merriweather, Helvetica, sans-serif;
$font-highlight: "Bree Serif", Helvetica, sans-serif;

//breakpoints

$small: 450px;
$medium: 760px;
$large: 1200px;

Вот стиль.s css, который основной файл, который обновляется. 

@import "variables";
@import "normalize";
@import "mixins";
@import "base";
@import "interface";

@import "modules/backgrounds";
@import "modules/media";
@import "modules/tables";
@import "modules/navigation";
...