title: Gulp Js & BundleConfig.json Sass Not Compiling @Import?
body: <p>I am new to this whole Grunt/Gulp setup, and I'm trying to set up a simple solution. My JS, Html and CSS is working of sorts. But I cannot get the SASS to compile correctly. It's a .Net core application using the <code>BundleConfig.json</code> file which is being used in my <code>gulpfile.js</code>.</p>
  
  <p>My CSS file ends up like this</p>
  
  <pre class="lang-css prettyprint-override"><code>@import"_variables.scss";@import"base.scss";
  </code></pre>
  
  <p>Without the SASS being compiled and I'm stuck now.</p>
  
  <p>Here is my bundleconfig.json</p>
  
  <pre class="lang-json prettyprint-override"><code>[
    {
      "outputFileName": "wwwroot/css/sass.min.css",
      "inputFiles": [
        "sass/main.scss"
      ]
    },
    {
      "outputFileName": "wwwroot/css/all.min.css",
      "inputFiles": [
        "node_modules/bootstrap/dist/css/bootstrap.min.css",
        "node_modules/bootstrap/dist/css/bootstrap-grid.min.css",
        "wwwroot/css/sass.min.css"
      ]
    },
    {
      "outputFileName": "wwwroot/js/all.min.js",
      "inputFiles": [
        "node_modules/jquery/dist/jquery.min.js",
        "node_modules/jquery-validation/dist/jquery.validate.min.js",
        "node_modules/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js",
        "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
        "scripts/**/*.js"
      ],
      "minify": {
        "enabled": true,
        "renameLocals": true
      },
      "sourceMap": false
    }
  ]
  </code></pre>
  
  <p>And here is my gulpfile.js</p>
  
  <pre class="lang-js prettyprint-override"><code>"use strict";
  
  var gulp = require("gulp"),
      scsscompile = require("gulp-sass"),
      concat = require("gulp-concat"),
      cssmin = require("gulp-cssmin"),
      htmlmin = require("gulp-htmlmin"),
      uglify = require("gulp-uglify"),
      merge = require("merge-stream"),
      del = require("del"),
      bundleconfig = require("./bundleconfig.json");
  
  var regex = {
      scss: /\.scss$/,
      css: /\.css$/,
      html: /\.(html|htm)$/,
      js: /\.js$/
  };
  
  gulp.task("min", ["min:js", "min:scss", "min:css", "min:html"]);
  
  gulp.task("min:js", function () {
      var tasks = getBundles(regex.js).map(function (bundle) {
          return gulp.src(bundle.inputFiles, { base: "." })
              .pipe(concat(bundle.outputFileName))
              .pipe(uglify())
              .pipe(gulp.dest("."));
      });
      return merge(tasks);
  });
  
  gulp.task("min:scss", function () {
      var tasks = getBundles(regex.scss).map(function (bundle) {
          return gulp.src(bundle.inputFiles, { base: "." })
              .pipe(concat(bundle.outputFileName))
              .pipe(scsscompile({ includePaths: ['./sass'] }))
              .pipe(gulp.dest("."));
      });
      return merge(tasks);
  });
  
  gulp.task("min:css", function () {
      var cssTasks = getBundles(regex.css).map(function (bundle) {
          return gulp.src(bundle.inputFiles, { base: "." })
              .pipe(concat(bundle.outputFileName))
              .pipe(cssmin())
              .pipe(gulp.dest("."));
      });
      return merge(cssTasks);
  });
  
  gulp.task("min:html", function () {
      var tasks = getBundles(regex.html).map(function (bundle) {
          return gulp.src(bundle.inputFiles, { base: "." })
              .pipe(concat(bundle.outputFileName))
              .pipe(htmlmin({ collapseWhitespace: true, minifyCSS: true, minifyJS: true }))
              .pipe(gulp.dest("."));
      });
      return merge(tasks);
  });
  
  gulp.task("clean", function () {
      var files = bundleconfig.map(function (bundle) {
          return bundle.outputFileName;
      });
  
      return del(files);
  });
  
  gulp.task("watch", function () {
      getBundles(regex.js).forEach(function (bundle) {
          gulp.watch(bundle.inputFiles, ["min:js"]);
      });
  
      getBundles(regex.scss).forEach(function (bundle) {
          gulp.watch(bundle.inputFiles, ["min:scss"]);
      });
  
      getBundles(regex.css).forEach(function (bundle) {
          gulp.watch(bundle.inputFiles, ["min:css"]);
      });
  
      getBundles(regex.html).forEach(function (bundle) {
          gulp.watch(bundle.inputFiles, ["min:html"]);
      });
  });
  
  function getBundles(regexPattern) {
      return bundleconfig.filter(function (bundle) {
          return regexPattern.test(bundle.outputFileName);
      });
  }
  </code></pre>
  
  <p>My Sass file which I am trying to compile <strong>main.scss</strong> is just this, imports to Sass files in the same directory.</p>
  
  <pre class="lang-css prettyprint-override"><code>@import "_variables.scss";
  @import "base.scss";
  </code></pre>
  
  <p>When I run the grunt task, I get this?</p>
  
  <blockquote>
    <p>Expected semicolon or closing curly-brace, found '-' Expected<br>
    semicolon or closing curly-brace, found '-' Expected semicolon or<br>
    closing curly-brace, found '-' Unexpected token, found '@import'<br>
    Unexpected token, found '"_variables.scss"' Unexpected token, found<br>
    '@import' Unexpected token, found '"base.scss"'</p>
  </blockquote>
  
  <p>Any help would be appreciated.</p>