为什么我的SCSS @import不工作？

Question

出于某种原因，我试图将任何导入到我的style.scss时不断收到错误。我似乎可以弄清楚为什么。

我得到的错误是

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

，当我尝试导入任何其他文件同样的事情发生。

这是我的主要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"; 

我的目录设置这样

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

我gulpfile.js是在核心目录

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

我曾试过给我们e compass watch但我得到相同的错误。

我在做什么错？

Answer 1

吞-SASS超过这取决于libsass发动机节点SASS的包装。

libsass和指南针是两个不同的SASS引擎，你不能使用libsass @import "compass";只要没有模块命名的指南针。

如果你想要利用Compass提供的mixin，你可以使用这个包：https://www.npmjs.com/package/compass-mixins和@import "compass";应该可以工作。