I'm trying to build my project with gulp, and the app.scss file is compiled with ruby sass. The problem is the app.css gets error and cannot be applied to browser.

Error: Invalid CSS after "... floor(math": expected ")", was ".div($grid-gutt..." on line 369 of node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss from line 8 of node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss from line 2 of src/styles/global/libraries.scss from line 4 of ./src/styles/app.scss

The app.css file after being compiled will have lines of comments like this

/* Error: Invalid CSS after "... floor(math": expected ")", was ".div($grid-gutt..." on line 369 of node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss from line 8 of node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss from line 2 of src/styles/global/libraries.scss from line 4 of ./src/styles/app.scss ...(there are more)

and the last line of app.css is commented too, it looks like this

/*# sourceMappingURL=data:application/json;...

here is the gulpfile.js

var browserSync  = require('browser-sync');
var sass         = require('gulp-ruby-sass');
var sourcemaps   = require('gulp-sourcemaps');
var handleErrors = require('../util/handleErrors');
var config       = require('../config').sass;
var autoprefixer = require('gulp-autoprefixer');

gulp.task('sass', function () {
  return sass(config.entry, config.settings)
     .on('error', handleErrors)
     .pipe(sourcemaps.init())
     .pipe(sourcemaps.write())
     .pipe(autoprefixer({ browsers: ['last 2 version'] }))
     .pipe(gulp.dest(config.dest))
     .pipe(browserSync.reload({stream:true}));
});