Ocasional gulp-sass找不到或不可读'导入变量partial时出错

时间:2016-03-22 18:22:00

标签: import sass gulp gulp-sass

每隔几次编辑我的_vars.scss文件,gulp-sass watch就会抛出错误

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

如果我注释掉

行,我可以再次编译
@import 'vars';

这是我的代码

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

1 个答案:

答案 0 :(得分:3)

我一直在阅读很多关于这个错误的内容,这通常是因为崇高的文字和使用Windows机器。如果您已经拥有这些设置,则必须进入升华首选项,然后"设置 - 用户"并添加另一个选项" atomic_save":true。你可以对此进行更多研究,因为有很多人都有这个问题。

设置代码 - 用户:

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

问候。