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
Post a Comment