CODEWITHSUNDEEP
csssassgulpgulp-sass
Bizzet
Bizzet

Reputation: 71

Why isn't my SCSS @import not working?

For some reason, I keep getting an error when trying to import ANYTHING into my style.scss. I can seem to figure out why.

The error I am getting is 

Error: File to import not found or unreadable: compass
    Parent style sheet: C:/wamp/www/core/themes/default/scss/style.scss
      on line 3 of themes/default/scss/style.scss
>> @import "compass";
   ^

The same thing happens when I try to import any other file.

This is my main style.scss

@import "compass";

@import "modules/functions";

@import "modules/mixins";

@import "modules/variables";

@import "modules/typography";

@import "layout/header";

@import "layout/main";

@import "layout/footer";

@import "layout/sidebar";

@import "layout/offcanvas";

@import "partials/buttons";

@import "partials/forms";

@import "partials/lists";

@import "partials/tables";

@import "layout/site";

My directory is setup like this

core
|--themes
|----default
|------scss
|--------_partials
|--------_modules
|--------_layout

My gulpfile.js is in the core directory

var gulp = require('gulp'),
    plumber = require('gulp-plumber'),
    rename = require('gulp-rename');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin'),
    cache = require('gulp-cache');
var minifycss = require('gulp-minify-css');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');

var theme = "themes/default/"

gulp.task('browser-sync', function() {
  browserSync({

       proxy: "localhost"

  });
});

gulp.task('bs-reload', function () {
  browserSync.reload();
});

gulp.task('images', function(){
  gulp.src(theme + 'images/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest(theme + 'images/build/'));
});

gulp.task('styles', function(){
  gulp.src([theme + 'scss/**/*.scss'])
    .pipe(plumber({
      errorHandler: function (error) {
        console.log(error.message);
        this.emit('end');
    }}))
    .pipe(sass())
    .pipe(autoprefixer('last 2 versions'))
    .pipe(gulp.dest('./'))
//   .pipe(rename({suffix: '.min'}))
//   .pipe(minifycss())
//    .pipe(gulp.dest('/'))
    .pipe(browserSync.reload({stream:true}))
});

gulp.task('scripts', function(){
  return gulp.src(theme + 'scripts/**/*.js')
    .pipe(plumber({
      errorHandler: function (error) {
        console.log(error.message);
        this.emit('end');
    }}))
    .pipe(concat('main.js'))
    .pipe(gulp.dest(theme + 'scripts/build/'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest(theme + 'scripts/build/'))
    .pipe(browserSync.reload({stream:true}))
});

gulp.task('default', ['browser-sync'], function(){
  gulp.watch(theme + "scss/**/*.scss", ['styles']);
  gulp.watch(theme + "scripts/**/*.js", ['scripts']);
  gulp.watch(theme + "*.html", ['bs-reload']);
});

I have tried to use compass watch but I get the same error.

What am I doing wrong?

Upvotes: 0

Views: 6742

Answers (1)

Mircea
Mircea

Reputation: 153

gulp-sass is a wrapper over node-sass which is depending on libsass engine.

libsass and compass are two different SASS engines and you cannot use @import "compass"; in libsass as long there is no module named compass.

If you however want to take advantage of what mixins Compass has to offer, you could use this package: https://www.npmjs.com/package/compass-mixins and @import "compass"; should work.

Upvotes: 3

Related Questions