[SOLVED] Node - An @import loop has been found

I'm new with js, node and all things related. I'm trying to set up a front end development environment from scratch, using gulp, bower, browser sync, and other plugins.

I'm almost done, it's working in some way, except for a couple of details I can't resolve because I'm not sure if it's something in the code syntax or the order of the functions executed in my gulpfile.js file, or because the plugins are not being used correctly. I have already tried to change the order of them, change some path, etc with no results.

Now I'm experiencing the following issues:

The main.scss needs to be saved two times before see the changes reflected in the browser.
When I run gulp in the console this is what I receive (these errors are new and appeared after a minor change proposed by Poeta in his answer, which helped me a lot.

[16:38:08] Starting 'html'...

[16:38:08] 'html' errored after 41 ms

[16:38:08] ReferenceError: injectFiles is not defined at Gulp. ([full_path]\gulpfile.js:50:18)

at module.exports ([full_path]\node_modules\orchestrator\lib\runTask.js:34:7)

at Gulp.Orchestrator._runTask ([full_path]\node_modules\orchestrator\index.js:273:3)

at Gulp.Orchestrator._runStep ([full_path]\node_modules\orchestrator\index.js:214:10)

at [full_path]\node_modules\orchestrator\index.js:279:18)

at finish ([full_path]\node_modules\orchestrator\lib\runTask.js:21:8)

at [full_path]\node_modules\orchestrator\lib\runTask.js:52:4

at f ([full_path]\node_modules\once\once.js:17:25)

at DestroyableTransform.onend ([full_path]\node_modules\end-of-stream\index.js:31:18)

at emitNone (events.js:91:20)

This is my gulpfile.js content:

var gulp = require('gulp');
var sass = require('gulp-sass');
var inject = require('gulp-inject');
var wiredep = require('wiredep').stream;
var plumber = require('gulp-plumber');
var imagemin = require('gulp-imagemin');
var browserSync = require('browser-sync');
var uglify = require('gulp-uglify');

gulp.task('styles', function(){
  var injectAppFiles = gulp.src(['!src/styles/main.scss', 'src/styles/*.scss'], {read: false});
  var injectGlobalFiles = gulp.src('src/global/*.scss', {read: false});

 function transformFilepath(filepath) {
    return '@import "' + filepath + '";';
  }

  var injectAppOptions = {
    transform: transformFilepath,
    starttag: '// inject:app',
    endtag: '// endinject',
    addRootSlash: false
  };

  var injectGlobalOptions = {
    transform: transformFilepath,
    starttag: '// inject:global',
    endtag: '// endinject',
    addRootSlash: false
  };

  return gulp.src('src/styles/main.scss')
    .pipe(plumber())
    .pipe(wiredep())
    .pipe(inject(injectGlobalFiles, injectGlobalOptions))
    .pipe(inject(injectAppFiles, injectAppOptions))
    .pipe(sass())
    .pipe(gulp.dest('dist/styles'));
});

gulp.task('html', ['styles'], function(){
  var injectAppFiles = gulp.src('src/styles/*.scss', {read: false});
  var injectOptions = {
    addRootSlash: false,
    ignorePath: ['src', 'dist']
  };

  return gulp.src('src/index.html')
    .pipe(plumber())
    .pipe(inject(injectFiles, injectOptions))
    .pipe(gulp.dest('dist'));
});

gulp.task('imagemin', function() {
  gulp.src('src/assets/*.{jpg,jpeg,png,gif,svg}')
  .pipe(plumber())
  .pipe(imagemin())
  .pipe(gulp.dest('dist/assets'));
});

gulp.task('uglify', function() {
  gulp.src('src/js/*.js')
      .pipe(uglify())
      .pipe(gulp.dest('dist/js'));
});

gulp.task('sass', function() {
  gulp.src('src/styles/*.scss')
      .pipe(plumber())
      .pipe(sass())
      .pipe(gulp.dest('dist/styles/'));
});

gulp.task('browser-sync', function() {  
  browserSync.init(["styles/*.css", "js/*.js","index.html"], {
      server: {
          baseDir: "dist"
      }
  });
});

gulp.task('watch', function() {
  gulp.watch('src/js/*.js', ['uglify']).on('change', browserSync.reload);
  gulp.watch('src/styles/*.scss', ['sass']).on('change', browserSync.reload);
  gulp.watch('src/assets/*.{jpg,jpeg,png,gif,svg}', ['imagemin']).on('change', browserSync.reload);
  gulp.watch('src/index.html', ['html']).on('change', browserSync.reload);
});



gulp.task('default', ['html', 'sass','imagemin', 'uglify', 'browser-sync', 'watch']);

So, could you please point me in the right direction to get this enviroment set in the proper way?

Update about previous problem: The following was resolved thanks to Bruno Poeta's answer.

Plumber found unhandled error: Error in plugin 'gulp-sass'

Message: src\styles\main.scss Error: An @import loop has been found: (full_path)/src/styles/main.scss imports src/styles/main.scss on line 526 of src/styles/main.scss

After that message...

[15:11:18] Finished 'styles' after 4.48 s

[15:11:18] Starting 'html'...

[15:11:19] gulp-inject 1 files into index.html.

[15:11:19] Finished 'html' after 1.44 s

[15:11:19] Starting 'default'...

[15:11:19] Finished 'default' after 6.98 μs

[Browsersync] Access URLs:

Local: localhost : 3000

External: 192.168 .0.4 :3000

UI: localhost :3001

UI External: 192.168 .0.4 :3001

[Browsersync] Serving files from: dist

[Browsersync] Watching files...

Note: the line 526 doesn't exist since it is generated by the gulp-inject plugin. These are the last lines in the main.css file, line 520 and 521:

// inject:app

// endinject