Warum funktioniert mein SCSS @ import nicht?

Question

Aus irgendeinem Grund bekomme ich immer einen Fehler, wenn ich ALLES in meine style.scss importieren will. Ich kann anscheinend herausfinden warum.

Der Fehler Ich erhalte ist

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"; 
^

Das gleiche passiert, wenn ich versuchen, eine andere Datei zu importieren.

Das ist mein Haupt 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"; 

Meine Auswahl ist Setup wie dieses

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

Mein gulpfile.js im Kernverzeichnis ist

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']); 
}); 

Ich habe es uns versucht e compass watch aber ich bekomme den gleichen Fehler.

Was mache ich falsch?

Answer 1

Schluck-sass ist ein Wrapper über node-sass die auf libsass abhängig ist Motor.

libsass und Kompass sind zwei verschiedene SASS Motoren und Sie können so lange nicht @import "compass"; in libsass verwenden kein Modul Kompass genannt ist.

Wenn Sie jedoch möchten, was Mixins Compass zu bieten hat, könnten Sie dieses Paket verwenden: https://www.npmjs.com/package/compass-mixins und @import "compass"; sollte funktionieren.