Gulp-sass: npm gulp-sass Variables and Mixins Not Working from @import

[Mr-Zafar]

[felipepastor]

Same here. I'm developing an ionic project and i need to use some compass mixin. Is there a way to use it?

Thanks.

[renarsvilnis]

Providing an example.
_Using gulp-sass v2.0.4_

site.scss - main file that just imports files:

@import 'utils/mixins';
@import 'utils/helpers';

@import 'pages/home';

utils/_mixins.scss - file containing all mixins:

@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

utils/_helpers.scss - file containing helper classes:

.u-clearfix {
  @include clearfix;
}

pages/home.scss:

.v_home {
  @include clearfix;
}

Interesting that in the utils/_helpers.scss file clearfix is succesfully included, but in the pages/_home.scss file it cannot be found and recieve this error message:

Error in plugin 'sass'
Message:
    src/scss/pages/home.scss
  7:12  no mixin named vertical-align

EDIT

After looking at node-sass repo, found out that the issue is maybe related to includePaths option for node-sass library. But by default gulp-sass adds the includePaths to the input file folder.

gulpfile.js

gulp.task('styles', function() {
  return gulp.src(IN.CSS + '**/*.scss')
    .pipe($.plumber())
    .pipe($.sass().on('error', $.sass.logError))
    .pipe(gulp.dest(OUT.CSS));
});

EDIT 2

Just realised it was MY fault.
Check file names to be prefixed with and underscore to indicate that hey are partials

Wrong: pages/home.scss
Correct: pages/_home.scss

[xzyfer]

I've PR'd ionic to fix their broken dependency https://github.com/driftyco/ionic/pull/4449

[mhartington]

The PR in mention has been merged.

https://github.com/driftyco/ionic/pull/4449

[mhartington]

Just a heads up, this can be closed. It's been fixed in our starter projects, as well in the framework. No need to wait until we cut a release, since user would need to clone the repo for use sass there.

[xzyfer]

Thanks for the update @mhartington