css - Why isn't my SCSS @import not working? -


for reason, keep getting error when trying import style.scss. can seem figure out why.

the error getting

error: file 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 try import other file.

this 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 setup this

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

my gulpfile.js in 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 use compass watch same error.

what doing wrong?

gulp-sass wrapper on node-sass depending on libsass engine.

libsass , compass 2 different sass engines , cannot use @import "compass"; in libsass long there no module named compass.

if want take advantage of mixins compass has offer, use package: https://www.npmjs.com/package/compass-mixins , @import "compass"; should work.


Comments

Popular posts from this blog

sql server - Cannot query correctly (MSSQL - PHP - JSON) -

php - trouble displaying mysqli database results in correct order -

C++ Linked List -