Open sungwoncho opened 8 years ago
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.
:+1:
@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.
here's the full commit if you're curious: https://github.com/tedpennings/site/commit/294c7a2b1a4de099cb408858aeecc2b045b29129
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
@shawnmmatthews The includePaths
property returns an array, so try this instead:
includePaths: [
require('node-neat').includePaths.concat('./node_modules/breakpoint-sass/stylesheets/'),
],
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
@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/'),
@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
Cool! got it. Had an old copy of bourbon installed that I had been using for "trouble shooting"... THANK YOU AGAIN.
@shawnmmatthews what was the solution here? I'm having problems with your same error Undefined variable: "$golden".
.
This solved it for me https://github.com/thoughtbot/neat/issues/360 but now I get the following warnings:
WARNING: [Bourbon] [Deprecation]
emis 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. https://github.com/lacroixdesign/node-bourbon/issues/37
_(ツ)_/¯
I get the error that
neat
is not found while using this module with gulp.Here is my setup:
gulpfile.js
main.scss
@import 'bourbon';
works but the second line throws.require('node-neat').includePaths
returns:And when I go to the path
_neat.scss
definitely exists. What am I missing?