sass import node_modules script - npm

Question

I'm new to gulp, susy, sass, and have been looking for a solution to my following problem but haven't been successful in finding one.
#import 'susy';
#import 'breakpoint-sass';
does not work, but
#import "../node_modules/modularscale-sass/stylesheets/_modular-scale.scss";
#import "../node_modules/breakpoint-sass/stylesheets/_breakpoint.scss";
works. But it's not the right way isn't it?
I've also tried, sudo npm install breakpoint-sass --save-dev but still didn't work.
My project looks like
.
├── assets
│   ├── atoms
│   │   └── _test.scss
│   └── style.scss
├── dist
│   └── style.css
├── gulpfile.js
└── package.json
and this is my gulp file:
const gulp = require('gulp'),
browserSync = require('browser-sync'),
reload = browserSync.reload,
autoprefixer = require('autoprefixer'),
sass = require('gulp-sass')
imagemin = require('gulp-imagemin'),
uglify = require('gulp-uglify'),
plumber = require('gulp-plumber');
gulp.task('sass', function() {
return gulp.src('./assets/*.scss')
.pipe(sass({
outputStyle: 'compressed',
includePaths: ['node_modules/susy/sass']
}).on('error', sass.logError))
.pipe(gulp.dest('./dist'));
});
and this is my package.json:
{
"private": true,
"engines": {
"node": ">=4"
},
"devDependencies": {
"autoprefixer": "^6.3.6",
"breakpoint-sass": "^2.7.0",
"browser-sync": "^2.2.1",
"gulp": "^3.9.1",
"gulp-imagemin": "^3.0.1",
"gulp-plumber": "^1.0.1",
"gulp-sass": "^2.1.1",
"gulp-uglify": "^1.1.0",
"modularscale-sass": "^2.1.1",
"susy": "^2.2.12"
}
}
I hope you could help me out.
Thanks for your time

Answer 1

You just need to add the paths to the includePaths parameter in your sass task.
gulp.task('sass', function() {
return gulp.src('./assets/*.scss')
.pipe(sass({
outputStyle: 'compressed',
includePaths: [
'node_modules/susy/sass',
'node_modules/breakpoint-sass/stylesheets'
]
}).on('error', sass.logError))
.pipe(gulp.dest('./dist'));
});
In fact you had that already for susy just not breakpoint-sass. You can't import breakpoint-sass either, it has to be just breakpoint:
#import 'susy';
#import 'breakpoint';
That's because you want to import the file called node_modules/breakpoint-sass/stylesheets/_breakpoint.scss. Your import would try and find node_modules/breakpoint-sass/stylesheets/_breakpoint-sass.scss which doesn't exist.
For reference, the steps for installing and using a SASS library are:
Install the library with npm.
Find the library in node_modules/. Expand it, and find the file you want to #import. In this case it's _breakpoint.scss.
Add the path to the directory the file from step 3 lives in to includePaths.
Add the import to your own SASS source.
Or you can just keep the full #import in your code if you want. Or just include node_modules and then import e.g. susy/sass/susy and breakpoint-sass/stylesheets/breakpoint. It's up to you really.