What is causing the error when compiling sass via gulp?

Question

css

The project structure is currently as follows:

Inside app.scss, the following files are connected:

@import 'partials/base';
@import 'partials/navbar';

I am using gulp to build a project.
gulpfile.js:

var gulp = require('gulp'),
  sass = require('gulp-sass'),
  autoprefixer = require('gulp-autoprefixer'),
  jade = require('gulp-jade'),
  rename = require('gulp-rename');

var path = {
  src: {
    styles: './assets/scss/app.scss',
    jade: './assets/**/*.jade'
  },
  public: {
    styles: './public/css',
    jade: './public/',
  },
  watch: {
    styles: './assets/**/*.scss',
    jade: './assets/**/*.jade',
  }
};

gulp.task('styles', function() {
  return gulp.src(path.src.styles)
  .pipe(sass())
  .pipe(autoprefixer({
    browsers: ['last 5 version']
  }))
  .pipe(gulp.dest(path.public.styles))
});

gulp.task('jade', function() {
  return gulp.src(path.src.jade)
  .pipe(jade({
    pretty: true
  }))
  .pipe(gulp.dest(path.public.jade))
});

gulp.task('watch', function() {
  gulp.watch(path.watch.styles, ['styles']);
  gulp.watch(path.watch.jade, ['jade']);
});

There is a problem: I track changes in all .scss files. And if I compile app.scss, then everything works fine. If I change one of the two include files, then the first time everything works fine, but the second time I get the following error:

events.js:160
      throw er; // Unhandled 'error' event
      ^
Error: assets\scss\app.scss
Error: File to import not found or unreadable: ./partials/base
       Parent style sheet: D:/Developement/OpenServer/domains/revival.layout/assets/scss/app.scss
        on line 3 of assets/scss/app.scss
>> @import './partials/base';
   ^

Why can it occur and how to deal with it?

Answer 1

After all, everything is written in the
error Error: File to import not found or unreadable - The file for import is not found
AND the file with the line is specified - on line 3 of assets/scss/app.scss Change
' ./partials/base' to '../ partials/base'