Gulp: trying to import compass mixins

Question

I have just followed this tutorial without problems, to start using SASS. As you can see it includes a part where it is using compass mixins. I have compiled .scss files including @import compass/css3/box-sizing without problems.

Now I want to compile my .scss files, but using Gulp. So I have followed this tutorial. So now I have these files:

//src/DefaultBundle/Resources/public/assets/css/main.scss
form {
  span {
    color: red;
  }
}

var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('default', function() {
    gulp.src('src/DefaultBundle/Resources/public/assets/css/main.scss')
        .pipe(sass())
        .pipe(gulp.dest('web/css'));
});

So when I run $ gulp as the latter tutorial says, I get the .css file.

The problem: if I add @import compass/css/box-sizing at the top of my .scss file, I get this error when running $ gulp:

[13:12:01] Working directory changed to /var/www/my_project
[13:12:01] Using gulpfile /var/www/my_project/gulpfile.js
[13:12:01] Starting 'default'...
[13:12:01] Finished 'default' after 5.37 ms

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: src/DefaultBundle/Resources/public/assets/css/main.scss
Error: File to import not found or unreadable: compass/css3/box-sizing
       Parent style sheet: stdin
        on line 2 of stdin
>> @import "compass/css3/box-sizing";
   ^

    at options.error (/var/www/my_project/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:277:32)

Im on Ubuntu 15.

You aren't *using* Compass, why would you think you could import mixins from Compass? The Gulp tutorial you linked to only shows you how to use it with Sass, not Compass. — cimmanon, Jan 28 '16 at 13:13
This might help you out: http://stackoverflow.com/questions/24745932/gulp-cant-seem-to-find-compass-mixins?rq=1 — adamk22, Jan 28 '16 at 20:29

score 0 · Answer 1 · answered Feb 04 '18 at 00:29

Try THIS. You can also use includePaths option to add any partials:

var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('default', function() {
    gulp.src('src/DefaultBundle/Resources/public/assets/css/main.scss')
        .pipe(sass({
             includePaths: ['./node_modules/compass-mixins/lib', './another/partials/location']
        }))
        .pipe(gulp.dest('web/css'));
});

Gulp: trying to import compass mixins

1 Answers1