neat-helpers not found or unreachable when importing

[limelights]

When trying to @import 'neat/neat-helpers'; an error is thrown by gulp-sass.

Error in plugin 'sass'
Message:
    src/scss/_grid-settings.scss
Error: file to import not found or unreadable: neat/neat-helpers
       Current dir: /Users/limelights/code/myProject/web/src/scss/
        on line 1 of src/scss/_grid-settings.scss
>> @import 'neat/neat-helpers';
   --------^

Dependencies: node-sass@3.4.1 bourbon@4.2.3 node-bourbon@4.2.3 node-neat@1.7.2

gulpfile

import gulp from 'gulp';
import del from 'del';
import sass from 'gulp-sass';
import {includePaths as normalizeIncludePaths} from 'node-normalize-scss';
import {inlcudePaths as bourbonIncludePaths} from 'node-bourbon';
import {includePaths as neatIncludePaths} from 'node-neat';

let cssIncludePaths = [].concat(
  bourbonIncludePaths,
  normalizeIncludePaths,
  neatIncludePaths
);

gulp.task('clean', () => del(['.tmp', 'build/*', '!build/.git'], {dot: true}));

gulp.task('sass', () => {
  gulp.src('src/scss/main.scss')
    .pipe(sass({
      includePaths: cssIncludePaths
    }).on('error', sass.logError))
    .pipe(gulp.dest('build/css'));
});

gulp.task('sass:watch', () => {
  gulp.watch('src/**/*.scss', ['sass']);
});

gulp.task('default', ['clean', 'sass', 'sass:watch']);

Imports in src/scss/main.scss

@import 'normalize';
@import 'bourbon';
@import 'grid-settings';
@import 'neat';
@import 'variables';
@import 'mediaqueries';
@import 'layout';

Imports in src/scss/_grid_settings.scss

@import 'neat/neat-helpers';

$max-width: 1120px;
$visual-grid: true;
$visual-grid-color: orange !global;
$visual-grid-index: front !global;

$tablet: new-breakpoint(max-width 768px 8);
$mobile: new-breakpoint(max-width 480px 4);

[iamlacroix]

It looks like file you are trying to import, _neat-helpers.scss, exists in the same directory as the primary _neat.scss file: https://github.com/thoughtbot/neat/tree/246166e5ce2e0ae4d7730846d7857991fb07c8cc/app/assets/stylesheets. (There is no neat directory at all).

Simply changing the @import 'neat/neat-helpers'; to @import 'neat-helpers'; in your src/scss/_grid_settings.scss file fixed the issue on my end. Let me know if it still gives you issues!

Updated src/scss/_grid_settings.scss

@import 'neat-helpers';

$max-width: 1120px;
$visual-grid: true;
$visual-grid-color: orange !global;
$visual-grid-index: front !global;

$tablet: new-breakpoint(max-width 768px 8);
$mobile: new-breakpoint(max-width 480px 4);

[limelights]

I figured it out as well after I had recreated my project from scratch! Thanks so much for responding to this issue and thanks for the help.

Closing this issue as it is resolved!

[iamlacroix]

No problem, glad you were able to figure it out!

[bleuscyther]

@iamlacroix NIce