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はノードSASS libsassエンジンに依存しているオーバーラッパーです。

libsassとコンパス二つの異なるSASSエンジンであり、あなたは限りコンパスという名前のモジュールが存在しないlibsassで@import "compass";を使用することはできません。

コンパスが提供するミックスインを利用したい場合は、https://www.npmjs.com/package/compass-mixinsと@import "compass";のパッケージを使用することができます。