CODEWITHSUNDEEP
importsassgulpgulp-sass
binary-idiot
binary-idiot

Reputation: 119

Ocasional gulp-sass 'not found or unreadable' error when importing variable partial

Every few times I edit my _vars.scss file, gulp-sass watch will throw the error

Error in plugin 'sass'
Message:
    sass\stylesheet.scss
Error: File to import not found or unreadable: vars
    Parent style sheet: stdin
    on line 10 of stdin
>> @import 'vars';
   ^

I can get it to compile again if I comment out the line

@import 'vars';

Here is my code

stylesheet.scss

//Settings
@import 'colors';
@import 'vars';

//External libs
@import 'font-awesome';
@import 'susy';
@import 'breakpoint';

//Global and default styles
@import 'global';

//sections
@import 'styles/header';
@import 'styles/main';
@import 'styles/footer';

_vars.scss

$font-heading: 'Oswald', sans-serif;
$font-paragraph: 'Raleway', sans-serif;

// Padding
$spacing: 5px;

@function spacing($size){
    @return $spacing * $size;
}

$footer-height: spacing(10);

$susy: (
    columns: 12,
    gutters: 1 / 4,
    // debug: (image: show)
);

Gulpfile,js

var gulp = require('gulp');
var util = require('gulp-util');
var replace = require('gulp-replace');
var browserSync = require('browser-sync').create();

var sass = require('gulp-sass');
var inclPaths = require('sass-include-paths');
var sourcemaps = require('gulp-sourcemaps');

var bower = require('gulp-bower');

var stylePaths = { 
    sass: './sass/**/*.scss',
    css: './css'
 }
var sassIncludes = []
    .concat(inclPaths.bowerComponentsSync());
var sassOptions = {
    style: 'expanded',
    includePaths: sassIncludes
}

var bowerDir = './bower_components';

var faPaths = {
    src: bowerDir + '/font-awesome/fonts/**.*',
    dest: 'fonts',
}

var vendorJS = {
    base: bowerDir,
    scripts: [bowerDir + '/jquery/dist/jquery.js'],
    dest: './js/vendor'
}

gulp.task('sass', function(){
    return gulp
        .src(stylePaths.sass)
        .pipe(sourcemaps.init())
        .pipe(sass(sassOptions).on('error', sass.logError))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(stylePaths.css))
        .pipe(browserSync.stream({match: '**/*.css'}));
});

gulp.task('watch', ['sass'], function(){

    browserSync.init({
        proxy: 'mysite.local'
    });

    gulp.watch(stylePaths.sass, ['sass']);
    gulp.watch('./*.html').on('change', browserSync.reload);
});

gulp.task('bower', function(){
    return bower()
        .pipe(gulp.dest(bowerDir));
});

gulp.task('faFonts', function(){
    return gulp.src(faPaths.src)
        .pipe(gulp.dest(faPaths.dest));
});

gulp.task('vendorScripts', function(){
    return gulp.src(vendorJS.scripts, {base: vendorJS.base})
        .pipe(gulp.dest(vendorJS.dest));
})

gulp.task('default', ['watch']);

Upvotes: 1

Views: 948

Answers (1)

Leo
Leo

Reputation: 1027

I have been reading a lot about this error, and it is usually because of sublime text and using a windows machine. If you already have those settings you have to go into sublime preferences, then "Settings - User" and add another option "atomic_save": true. You can research more about this as there are tons of persons having this issue.

Code of Settings - User:

{
    "color_scheme": "Packages/Color Scheme - Default/Twilight.tmTheme",
    "font_size": 9,
    "atomic_save": true
}

Regards.

Upvotes: 3

Related Questions