Gulp ' Unregognised input in file'

Question

Lately my gulp task started to give me errors. It doesnt want to compile my .scss files anymore. Very strange.

The big chunk of my gulp task seems to be running fine, it's the styles task that throws me an error.

This is my CMD when I try to run the gulp styles command

As you can see it doesnt recognise input from the dropdowns.scss file as valid.

//
// Dropdown menus
// --------------------------------------------------


// Dropdown arrow/caret
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top:   $caret-width-base dashed;
  border-top:   $caret-width-base solid \9; // IE8
  border-right: $caret-width-base solid transparent;
  border-left:  $caret-width-base solid transparent;
}

There seems to be nothing wrong with this file, however on line 13 it is the first time it calls a variable. When I remove this file it will find other scss variables that it wont recognise in other files. In short: all scss variables are unrecognisable.

// ### Styles
// `gulp styles` - Compiles, combines, and optimizes Bower CSS and project CSS.
// By default this task will only log a warning if a precompiler error is
// raised. If the `--production` flag is set: this task will fail outright.
gulp.task('styles', ['wiredep'], function() {
  var merged = merge();
  manifest.forEachDependency('css', function(dep) {
    var cssTasksInstance = cssTasks(dep.name);
    if (!enabled.failStyleTask) {
      cssTasksInstance.on('error', function(err) {
        console.error(err.message);
        this.emit('end');
      });
    }
    merged.add(gulp.src(dep.globs, {base: 'styles'})
      .pipe(cssTasksInstance));
  });
  return merged
    .pipe(writeToManifest('styles'));
});

I'm thinking Windows 10 might have done a upgrade to the system or perhaps it had something to do that I tried to install critical css throught NPM. However, I doubt this can destroy a perfectly fine task.

So far I tried reinstalling node.js bower and gulp itself but it keeps giving me this error. Also I've tried to configure a fresh project (which worked everytime over the previous months) but even with a fresh project it wont compile. I'm thinking some dependency might be outdated.

Ugh, I've been working on this for hours and I'm running out of ideas of what might be the cause of this.

Thanks in advance!

Answer 1

Update2--

Bower.json

{
  "name": "starter-template",
  "homepage": "http://www.thomwensink.nl",
  "authors": [
    "Thom Wensink <[email protected]>"
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "bootstrap-sass": "^3.3.6",
    "slick-carousel": "^1.5.9",
    "font-awesome": "fontawesome#^4.5.0",
    "imgLiquid": "^0.9.944",
    "modernizr": "2.8.2"
  },
  "overrides": {
    "bootstrap-sass": {
      "main": [
        "./assets/stylesheets/bootstrap/_variables.scss",
        "./assets/stylesheets/bootstrap/_mixins.scss",
        "./assets/stylesheets/bootstrap/_normalize.scss",
        "./assets/stylesheets/bootstrap/_print.scss",
        "./assets/stylesheets/bootstrap/_scaffolding.scss",
        "./assets/stylesheets/bootstrap/_type.scss",
        "./assets/stylesheets/bootstrap/_code.scss",
        "./assets/stylesheets/bootstrap/_grid.scss",
        "./assets/stylesheets/bootstrap/_tables.scss",
        "./assets/stylesheets/bootstrap/_forms.scss",
        "./assets/stylesheets/bootstrap/_component-animations.scss",
        "./assets/stylesheets/bootstrap/_navs.scss",
        "./assets/stylesheets/bootstrap/_navbar.scss",
        "./assets/stylesheets/bootstrap/_utilities.scss",
        "./assets/stylesheets/bootstrap/_responsive-utilities.scss",
        "./assets/javascripts/bootstrap/transition.js",
        "./assets/javascripts/bootstrap/collapse.js",
        "./assets/javascripts/bootstrap/scrollspy.js",
        "./assets/javascripts/bootstrap/affix.js"
      ]
    },
    "font-awesome": {
      "main": [
        "./scss/font-awesome.scss",
        "./fonts/*"
      ]
    },
    "modernizr": {
      "main": "./modernizr.js"
    }
  }
}

Regarding the error message of reinstalling bootstrap, there is none. It goes as expected. However, the problem persists.

Update--

Turns out the problem is with bootstrap's version 3.3.5 version.

Could you please change the version of your bootstrap in the bower.json?

From:

"bootstrap": "~3.3.1",

To:

"bootstrap": "3.3.1",

and the run bower install again, please.

---

Are you using some kind of gulp-sass plugin ? Below code is is require for compiling sass to css from gulp. You may need to install gulp-sass by npm install --save-dev gulp-sass

var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('client/sass/*.scss')
  .pipe(sass().on('error', sass.logError) )
  .pipe(gulp.dest('css'))
});

Answer 2

For other people that are having this issue: I managed to solve it following the steps from this website.