gulp-sass: ERRORE: file da importare non trovato o illeggibile

Question

Sto riscontrando problemi nel compilare i miei file SASS in modo da averli divisi e importati quelli che ho richiesto nel mio file scss principale.

Ho una cartella che contiene gli stili:

main.scss

top_menu.scss

ho aggiunto alcune importazioni al mio main.scss:

@import 'font-awesome'; 
@import 'bootstrap'; 
@import 'custom_bootstrap';  
@import 'top_menu'; 

e la mia task gulp-sass assomiglia a questo

gulp.task('compile_sass', ['compile_bower_sass'], function() { 
    return gulp.src(paths.scss_files, {base:'src'}) 
    .pipe(gulp.dest(paths.dist)) 
    .on('error', gutil.log) 
    .pipe(sass().on('error', sass.logError)) 
    .pipe(minifycss({ 
     keepSpecialComments: false, 
     removeEmpty: true 
    })) 
    .pipe(rename({suffix: '.min'})) 
    .pipe(gulp.dest(paths.dist)) 
}); 

.210

La variabile paths.scss_files è impostato su:

scss_files: './src/assets/styles/**/*.scss'

Quando viene eseguita l'operazione ricevo un errore:

file to import not found or unreadable: top_menu

Io in realtà voglio essere in grado di dividere il mio SCSS fuori in separata sottocartelle correlate e quindi usa @import: 'navigation \ top_menu' qualcosa di simile.

Perché questo errore si sarebbe verificato?

Grazie

EDIT:

Il compito compile_bower_sass compila altri file SCSS (font-impressionante, bootstrap, custom_bootstrap) che sono richiesti come si può vedere dalle linee @import sul mio principale. SCSS.

Quando si esegue l'attività compile_sass e si osserva la cartella output (dist), vedo i file css generati dall'attività compile_bower_sass (quindi font-awesome.css, bootstrap.css, custom_bootstrap.min.css). Ho notato che anche il file top_menu.scss viene copiato, ma non viene compilato, quindi suppongo che questo sia il motivo per cui si verifica l'errore.

Devo specificare un ordine nella mia attività, quindi potrei assicurarmi che compili main.scss per garantire che tutti i file richiesti come il mio custom top_menu.scss vengano compilati per primi e siano disponibili per il mio file principale per accedere ?

EDIT 2

OK, quindi penso che il mio pensiero questo era giù per l'ordine di compilazione è corretta.

Se cambio variabile scss_files per impostare in modo esplicito l'ordine che ottengono in filodiffusione al gulp-sass (questa volta ho ulteriormente organizzati in cartelle)

scss_files:   ['./src/assets/styles/custom_bootstrap.scss', 
         './src/assets/styles/navigation/top_menu.scss', 
         './src/assets/styles/navigation/user_toolbar.scss', 
         './src/assets/styles/main.scss'] 

Ora il mio compito originale in fase di compilazione sass funziona come è .

Quindi, la mia prossima domanda è come configurare gulp-sass in modo da poter garantire che il mio file main.scss sia compilato per ultimo? O sto andando su questo tutto nel modo sbagliato?

EDIT 3:

Probabilmente dovrei aggiunto queste configurazioni attività extra quando prima questa domanda. Quindi l'attività compile_sass richiede che compile_bower_sass venga eseguito per primo.

/*-BOWER PACKAGEs INCLUSION --------------------------------------------*/ 
    gulp.task('compile_bower_sass', ['compile_bower_css'], function(){ 
     var sassFiles = mainBowerFiles('**/*.scss'); 
     return gulp.src(sassFiles) 
     .pipe(rename(function(path){ 
      path.basename = path.basename.replace(/^_/, ''); 
      return path; 
      // required where the string begins with _ , meaning that sass won't compile it (bootstrap) 
     })) 
     .pipe(sass({onError: function(e) { console.log(e); } })) 
     .pipe(gulp.dest(paths.dist_styles)); 
    }); 

    gulp.task('compile_bower_css', function(){ 
     var cssFiles = mainBowerFiles('**/*.css'); 
     return gulp.src(cssFiles) 
     .pipe(gulp.dest(paths.dist_styles)); 
    }); 

gulp.task('compile_sass', ['compile_bower_sass'], function() { 
    return gulp.src(paths.scss_files, {base:'src'}) 
    .pipe(sass({outputStyle: 'compressed'}) 
     .on('error', sass.logError)) 
    .pipe(rename({suffix: '.min'})) 
    .pipe(gulp.dest(paths.dist)) 
}); 

Im ora finendo con

file to import not found or unreadable: font-awesome

Nella mia cartella stile dist posso vedere font-awesome.css è stato generato. Sono abbastanza nuovo nella compilation di gulp e sass, quindi senza dubbio ho frainteso qualcosa qui.

Quando si utilizza l'istruzione @import, il file sta cercando il file scss o css denominato?

Answer 1

Ho cercato di ricreare il problema che stai avendo, ma per me sembra funzionare bene.

Allegherò il mio codice e uno scatto della struttura della cartella da confrontare.

L'unica omissione è la parte ['compile_bower_sass'], in quanto non sono completamente sicuro di ciò che è necessario qui. È possibile che sia qualcosa che dovrebbe utilizzare un loadPath?

Noterete inoltre dallo screenshot delle cartelle che i file scss vengono copiati anche su dist. Questo potrebbe non essere desiderabile.

Ecco il codice Gulp:

var gulp = require('gulp'); 
var sass = require('gulp-sass'); 
var minifycss = require('gulp-minify-css'); 
var rename = require('gulp-rename'); 
var gutil = require('gulp-util'); 

var paths = { 
    scss_files: './src/assets/styles/**/*.scss', 
    dist: './dist' 
}; 

gulp.task('compile_sass', function() { 
    return gulp.src(paths.scss_files, {base:'src'}) 
    .pipe(gulp.dest(paths.dist)) 
    .on('error', gutil.log) 
    .pipe(sass().on('error', sass.logError)) 
    .pipe(minifycss({ 
     keepSpecialComments: false, 
     removeEmpty: true 
    })) 
    .pipe(rename({suffix: '.min'})) 
    .pipe(gulp.dest(paths.dist)) 
}); 

Ecco le cartelle: http://take.ms/AOFND

Forse tutto ciò che serve è:

var gulp = require('gulp'); 
var sass = require('gulp-sass'); 
var rename = require('gulp-rename'); 

var paths = { 
    scss_files: './src/assets/styles/**/*.scss', 
    dist: './dist' 
}; 

gulp.task('compile_sass', function() { 
    return gulp.src(paths.scss_files, {base:'src'}) 
    .pipe(sass({outputStyle: 'compressed'}) 
     .on('error', sass.logError)) 
    .pipe(rename({suffix: '.min'})) 
    .pipe(gulp.dest(paths.dist)) 
}); 

Answer 2

Ho avuto lo stesso problema (usando un Mac con Sierra) e sembrava accadere solo quando stavo usando lo stile globale di includere.

Si scopre che è dovuto ad una condizione gara, è possibile lavorare intorno ad esso da mettendo una breve attesa in in questo modo ...

var gulp = require('gulp'); 
var sass = require('gulp-sass'); 
var wait = require('gulp-wait'); 

gulp.task('scss', function() { 
    gulp.src('resources/scss/**/*.scss') 
     .pipe(wait(200)) 
     .pipe(sass()) 
     .pipe(gulp.dest('public/dist')); 
}); 

Answer 3

ho trovato una soluzione. Ho provato molte altre soluzioni, alcuni hanno suggerito che si tratta di un problema di SublimeText che ha a che fare con l'impostazione di "atomic_save": true, che non ha funzionato per me.

Ho anche provato ad aggiungere uno .pipe(wait(500)). Non ha funzionato neanche.

Ciò che ha funzionato per me ho appena aggiunto un'interruzione di riga prima dell'infrazione @import. Quindi nel tuo caso se è gettare un errore su top_menu, aggiungere un'interruzione di linea, così invece di:

@import 'custom_bootstrap';   
@import 'top_menu'; 

mettere un'interruzione di linea in modo che diventi:

@import 'custom_bootstrap';  

@import 'top_menu'; 

Non ho idea perché, ma questa è l'unica cosa che ha funzionato per me.