file to import not found or unreadable: neat

[sungwoncho]

I get the error that neat is not found while using this module with gulp.

Here is my setup:

gulpfile.js

gulp.task('sass', function () {
  gulp.src('src/stylesheets/main.scss')
      .pipe(sass({
        outputStyle: 'compressed',
        includePaths: require('node-neat').includePaths
      }).on('error', sass.logError))
      .pipe(gulp.dest('public/stylesheets/main.css'));
});

main.scss

@import 'bourbon';
@import 'neat';

@import 'bourbon'; works but the second line throws.

file to import not found or unreadable: neat

require('node-neat').includePaths returns:

[ '/Users/mikecho/dev/node_projects/nmdi.co/node_modules/node-neat/node_modules/node-bourbon/node_modules/bourbon/app/assets/stylesheets', '/Users/mikecho/dev/node_projects/nmdi.co/node_modules/node-neat/node_modules/bourbon-neat/app/assets/stylesheets' ]

And when I go to the path _neat.scss definitely exists. What am I missing?

[sungwoncho]

Turns out I have installed node-bourbon. Resolved by npm uninstall --save-dev node-bourbon and npm install --save-dev node-neat and restarting the server.

Maybe node-bourbon and node-neat don't play well with each other when installed together.

[tedpennings]

👍

[tedpennings]

@sungwoncho here's how I worked around this. I'm using webpack, but this is what I did.

ERROR in ./~/css-loader!./~/sass-loader?outputStyle=expanded&includePaths[]=%2FUsers%2Ftedpennings%2Freact-site%2Fnode_modules%2Fnode-bourbon%2Fnode_modules%2Fbourbon%2Fapp%2Fassets%2Fstylesheets&includePaths[]=%2FUsers%2Ftedpennings%2Freact-site%2Fnode_modules%2Fnode-neat%2Fnode_modules%2Fnode-bourbon%2Fnode_modules%2Fbourbon%2Fapp%2Fassets%2Fstylesheets%2C%2FUsers%2Ftedpennings%2Freact-site%2Fnode_modules%2Fnode-neat%2Fnode_modules%2Fbourbon-neat%2Fapp%2Fassets%2Fstylesheets!./sass/main.scss
Module build failed:
@import "neat";
       ^
      File to import not found or unreadable: neat

It turned out that the node-neat includePaths was an array of two strings, and sass-loader was toString-ing it to generate an invalid path that included a comma.

I made the following change in my webpack config:

  module: {
    loaders: [
      { test: /\.scss$/, loader: 'style!css!sass?outputStyle=expanded&' +
        'includePaths[]=' + encodeURIComponent(require('node-bourbon').includePaths) +
        '&includePaths[]=' + encodeURIComponent(require('node-neat').includePaths[1]) }
    ]
  },

Note the require('node-neat').includePaths[1]. Once I did that, everything worked great!

It might be worth switching this project to only export an includePath for node-neat, and depend on the user to wire up node-bourbon, too, as it seems that's causing more harm than good for some people.

[tedpennings]

here's the full commit if you're curious: tedpennings/site@294c7a2

[shawnmmatthews]

Hello Sungwoncho and Tedpennings,

I seem to be running into the same problem both of you were experiencing. It doesn't seem to be resolved by either removing node-bourbon (which re-downloads as a dependecy anyway on an npm install --save-dev node-neat . I'm not super familiar with webpack either, but am willing to try just about anything to get this working. I've already burned a days time trying to figure out whats gone wrong.

Gulpfile is as follows -

var sass_config = {  // THE INCLUDES FOR BOTH PROD AND DEV
  importer: importer,
  includePaths: [
    './node_modules/breakpoint-sass/stylesheets/',
    require('node-neat').includePaths,
  ],
  sourcemap: true,
};
gulp.task('sass:dev', function () {
  gulp.src('./sass/**/*.scss') // DEV TASK (ON)
    .pipe(sourcemaps.init())
      .pipe(sass(sass_config).on('error', sass.logError))
      .pipe(autoprefixer({
        browsers: ['last 2 version']
      }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./css'))
    .pipe(ifElse(argv.livereload, livereload));
});

main.scss starts as follows.

@import 'bourbon';
@import 'breakpoint';
@import 'neat';

I just keep getting the same error over and over.

file to import not found or unreadable: neat

Any help would be GREATLY appreciated.

Best,
Shawn

[iamlacroix]

@shawnmmatthews The includePaths property returns an array, so try this instead:

includePaths: [
  require('node-neat').includePaths.concat('./node_modules/breakpoint-sass/stylesheets/'),
],

[shawnmmatthews]

Thanks @iamlacroix, but it doesn't seem to have done the trick...

I tested to make sure that the array will accept a comma seperated list.

I still receive the file to import not found or unreadable when using the .concat line you sent over. It also causes breakpoint-sass to stopworking.

Attached is my teams full gulpfile.js that we are trying to add node-neat to.

'use strict';

var gulp = require('gulp'); // Import Gulp Node Package
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');

var importer = require('node-sass-globbing'),
    livereload = require('gulp-livereload'),
    ifElse = require('gulp-if-else'),
    argv = require('yargs').argv;

var sass_config = {  // THE INCLUDES FOR BOTH PROD AND DEV
  importer: importer,

includePaths: [
 // Not working --- require('node-neat').includePaths.concat('./node_modules/breakpoint-sass/stylesheets/'),

  './node_modules/breakpoint-sass/stylesheets/',
  require('bourbon').includePaths,
  require('node-neat').includePaths

],

  sourcemap: true,
};

gulp.task('sass:prod', function () { // PRODUCTION TASK (OFF)
  gulp.src('./sass/**/*.scss')
    .pipe(sass(sass_config).on('error', sass.logError))
    .pipe(autoprefixer({
       browsers: ['last 2 version']
    }))
    .pipe(gulp.dest('./css'));
});

gulp.task('sass:dev', function () {

  gulp.src('./sass/**/*.scss') // DEV TASK (ON)
    .pipe(sourcemaps.init())
      .pipe(sass(sass_config).on('error', sass.logError))
      .pipe(autoprefixer({
        browsers: ['last 2 version']
      }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./css'))
    .pipe(ifElse(argv.livereload, livereload));
});

gulp.task('sass:watch', ['sass:dev'], function () { // WATCH TASK (ON)
  if (argv.livereload) {
    livereload.listen();
  }
  gulp.watch('./sass/**/*.scss', ['sass:dev']);
});

gulp.task('default', ['sass:dev', 'sass:watch']); //determines what tasks are being run

With my main.scss file containing

@import 'bourbon';
@import 'breakpoint';
@import 'neat';

It makes it all the way to neat prior to erroring out because of "file to import not found or unreadable: neat
" which leads me to believe its not the array structure.

Please let me know if you have anything else I should try.

I sincerely appreciate your help. I'd really love to get this going.

Best,
Shawn

[iamlacroix]

@shawnmmatthews Oops, I accidentally left the original array brackets in my example, which won't work since it creates a nested array. Use the following for your includePaths property instead...I just tested it locally with your config and it worked :)

includePaths: require('node-neat').includePaths.concat('./node_modules/breakpoint-sass/stylesheets/'),

[shawnmmatthews]

@iamlacroix Awesome! THANK YOU... I've been struggling with that all day. It appears to be going through.

I'm left with an undefined error.

Error in plugin 'sass'
Message:
node_modules/node-neat/node_modules/bourbon-neat/app/assets/stylesheets/settings/_grid.scss
7:32 Undefined variable: "$golden".

I'll see if I can't hunt that down.

Best,
Shawn

[shawnmmatthews]

Cool! got it. Had an old copy of bourbon installed that I had been using for "trouble shooting"... THANK YOU AGAIN.

[msecret]

@shawnmmatthews what was the solution here? I'm having problems with your same error Undefined variable: "$golden"..

[dougshults]

This solved it for me thoughtbot/neat#360 but now I get the following warnings:

WARNING: [Bourbon] [Deprecation] em is deprecated and will be removed in 5.0.0.

WARNING: The breakpoint() mixin was renamed to media() in Neat 1.0. Please update your project with the new syntax before the next version bump.

This thread was also worth a read. lacroixdesign/node-bourbon#37

_(ツ)_/¯