I use gulp-sass to compile scss files. In one directory is the main file style.scss and the file that is imported into the main print.scss . main.scss compiles normally without errors and takes values ​​in the print.scss file, but as soon as I want to save the changes in the print.scss file, it gives an error:

events.js:154 throw er; // Unhandled 'error' event ^ Error: app\scss\style.scss Error: File to import not found or unreadable: _print Parent style sheet: stdin on line 3 of stdin >> @import "_print"; ^ at options.error (E:\ready\node_modules\node-sass\lib\index.js:277:32)

Below is the file gilfile.js and other files that can help to solve this problem.

 var gulp = require('gulp'); var sass = require('gulp-sass'); var sassGlob = require('gulp-sass-glob'); // var sass = require('gulp-ruby-sass'); var cssGlobbing = require('gulp-css-globbing'); var autoprefixer = require('gulp-autoprefixer'); var sourcemaps = require('gulp-sourcemaps'); var browserSync = require('browser-sync'); var useref = require('gulp-useref'); var uglify = require('gulp-uglify'); var gulpIf = require('gulp-if'); var cleanCSS = require('gulp-clean-css'); var del = require('del'); var runSequence = require('run-sequence'); gulp.task('browserSync', function() { browserSync({ server: { baseDir: 'app' } }) }) gulp.task('sass', function(){ return gulp.src('app/scss/**/*.scss') .pipe(sourcemaps.init()) // .pipe(cssGlobbing({ // extensions: ['.scss'] // })) .pipe(sassGlob()) .pipe(sass()) .pipe(autoprefixer({ browsers: ['last 2 versions'], cascade: false })) .pipe(cleanCSS({compatibility: 'ie8'})) .pipe(sourcemaps.write('.')) .pipe(browserSync.reload({ stream: true })) .pipe(gulp.dest('app/css')); }) gulp.task('useref', function(){ return gulp.src('app/*.html') .pipe(useref()) // Minifies only if it's a JavaScript file .pipe(gulpIf('*.js', uglify())) .pipe(gulp.dest('dist')) }) gulp.task('clean', function() { return del.sync('dist').then(function(cb) { return cache.clearAll(cb); }); }) gulp.task('clean:dist', function() { return del.sync(['dist/**/*', '!dist/images', '!dist/images/**/*']); }); gulp.task('fonts', function() { return gulp.src('app/fonts/**/*') .pipe(gulp.dest('dist/fonts')) }) // Watchers gulp.task('watch', ['browserSync', 'sass'], function(){ gulp.watch('app/scss/**/*.scss', ['sass']); gulp.watch('app/*.html', browserSync.reload); gulp.watch('app/js/**/*.js', browserSync.reload); // Other watchers }) gulp.task('default', function(callback) { runSequence(['sass', 'browserSync', 'watch'], callback ) }) gulp.task('build', function(callback) { runSequence( 'clean:dist', // ['sass', 'useref', 'images', 'fonts'], ['sass', 'useref', 'fonts'], callback ) })

Common html-code element:

  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!--build:css css/style.min.css --> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/print.css"> <!-- endbuild --> </head> <body> <header> <h1>Добро пожаловать!</h1> </header> <section> <h2>Секция документа</h2> <p>Проверяем компиляцию файлов</p> <p>Не обьеденяет в один css несколько фалов</p> </section> <section> <h1>Всего две команды:</h1> <p>gulp build</p> <p>gulp default</p> </section> <section class="flex"> <div>1</div> <div>2</div> <div>3</div> </section> <section class="print"> <h2>ЭТО, ПРИНТ</h2> <a href="#"> <div> <p>Раздумье</p> </div> </a> </section> <!--build:js js/main.min.js --> <script src="js/carousel.js"></script> <script src="js/gallery.js"></script> <script src="js/nav.js"></script> <!-- endbuild --> </body> </html>

Item code where .scss ( style.scss ) works:

 @import "_print"; @import "_mixins"; .testing { width: pecentage(5/7); } body { background: grey; h1 { color:white; @include font-size(40px); background: green; } } section { font-size: 40px; } .flex { display: flex; justify-content: space-between; div { width: 30%; background: orange; &:hover { background: red; } } }

How to fix it and what is wrong here?

    2 answers 2

    I found such a way out of this situation:

    1) Install gulp-sass-glob ;
    2) In the tasks we set it before tracking sass ;
    3) Set the error output but not stop the tracking process;
    4) In case of an error, we save the file several times until the system applies the changes or just once we save the main file, where we import the children;
    5) All mixins and variables will have to be imported into each file, because otherwise they cannot work.

    PS is one of the solutions, I did not find anything in the case, if someone knows a more effective solution, I will be glad to see and apply! Thank you in advance!

      There are at least 3 options for fixing the problem:
      1. It assumes a good understanding of Node.js , as well as the work of node-sass and libsas , which actually compile the files.
      Its essence lies in writing your own handler of the included files. If you look at the documentation for node-sass , you can see in the options object the key importer , which is actually a user-defined function. When LibSass meets the @import directive. A custom importer allows you to extend the LibSass engine LibSass both synchronous and asynchronous mode.
      2. This method is based on a small hack in the watch task and comes down to adding a timer to perform the sass task:

       gulp.task('watch', function() { watch('dev/scss/**/*.scss', function(event, cb) { setTimeout(function(){gulp.start('sass');},500) // задача выполниться через 500 миллисекунд и файл успеет сохраниться на диске }); });

      Here I used the gulp-watch plugin, but I think it will work with the standard galp watch too.
      3. Using exactly the gulp-watch plugin, it takes as a second parameter an object with options, among which there is a delay equal to 10 milliseconds by default.

       gulp.task('watch', function() { watch('dev/scss/**/*.scss', {readDelay: 100}, function(event, cb) { gulp.start('sass'); }); });

      More information can be found in the documentation.