Schluck-Sass Include-Fehler zu Anbieter SCSS (mögliche Bestell Problem auch)

Question

Ich habe meine Bewerbung sass (in SCSS-Dateien) in verschiedenen Unterverzeichnisse in meinem Stile Verzeichnis, von denen einige @extend sass Arten von verschiedenen Anbietern gehören, die, (via bower) befinden sich in verschiedenen Unterverzeichnissen unter dem Vendor Verzeichnis.

Leider kann die Sass-Aufgabe die scss-Dateien des Anbieters und alle @extend-Deklarationen, die ich nicht gefunden habe, nicht finden, da sie nicht finden können, wovon sie z.

Error in plugin 'sass' 
Message: 
    styles/censum/censum.scss 
Error: ".graph-row" failed to @extend ".row". 
     The selector ".row" was not found. 
     Use "@extend .row !optional" if the extend should be able to fail. 
     on line 2 of styles/censum/censum.scss 

Mein minimiertes Beispiel ist wie folgt.

Ich habe auch versucht, die Lieferantenverzeichnisse zu gulp.src hinzufügen und nicht includePaths, z.

gulp.task('sass', function() { 
    gulp.src(['./vendor/**/*.scss', './styles/**/*.scss']) 
    .pipe(gulpSass().on('error', gulpSass.logError)); 
}); 

, die die Herstellerdateien zu verweisen scheint (wie es alles schleppt in schätze ich), aber ich habe Ausfälle bekommen entlang der Linien von:

Message: 
    vendor/bower/eonasdan-bootstrap-datetimepicker/src/sass/_bootstrap-datetimepicker.scss 
Error: Undefined variable: "$btn-primary-bg". 
     on line 7 of vendor/bower/eonasdan-bootstrap-datetimepicker/src/sass/_bootstrap-datetimepicker.scss 
$bs-datetimepicker-active-bg: $btn-primary-bg !default; 

die möglicherweise eine Bestell Problem ist?

Answer 1

Ok, bloß mit mir auf diesem. Was ich teile, basiert auf meinem Verständnis Ihrer Frage. Ich werde es aus der Perspektive eines neuen Projekts diskutieren, das für mich gut zu funktionieren schien.

Nehmen wir an, wir haben ein Projekt namens freche und im Inneren ist eine package.json Datei, indem Sie das folgende erstellt:

npm init -y 

Dann werden wir Gulp und die SASS-Komponente installieren wie so:

npm install gulp gulp-sass -save-dev 

Innerhalb eines Gulpfile.js an der Wurzel unseres Projektes haben wir den folgenden Code:

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

gulp.task('sass', function() { 
    return gulp 
    .src("./scss/**/*.scss") 
    .pipe(sass({includePaths: ['./vendor']})) 
    .pipe(gulp.dest("./dist")); 
}); 

Wie Sie wahrscheinlich aus dem obigen Code erraten können, haben wir ein Anbieter Verzeichnis und ein SCSS Verzeichnis an der Wurzel unseres Projektes.

Da ich nicht weiß, was in Ihrem Anbieter Verzeichnis ist, habe ich meine mit Zufälligkeit bevölkert. In einem Anbieter/Farben.SCSS Datei Ich habe folgendes:

.danger { 
    color: red; 
} 

.light { 
    color: silver; 
} 

Ich habe auch eine verschachtelte Datei auf Verkäufer/Dimensionierung/article.scss mit dem folgenden Code gefunden:

.title { 
    font-size: 22px; 
} 

Jetzt nehmen wir einen Blick auf was ist in meinem scss Verzeichnis.

Ich habe eine SCSS/main.scss Datei mit zwei Import-Anweisungen wie folgt:

@import "./sidebar/navigation"; 
@import "./content/blog"; 

Auch all diesem Projekt Zufälligkeit ist. Ich versuche nur, den Build-Prozess von all diesen Dateien und Verzeichnissen zu zeigen.

Ich habe zwei weitere SCSS-Dateien in meinem scss Ordner. Ich habe eine Datei SCSS/sidebar/navigation.scss mit dem folgenden Code:

nav { 
    padding: 10px; 
} 

Endlich habe ich eine Datei mit einem Bündel von Importen und erstreckt. Diese Datei ist SCSS/content/blog.scss und es enthält folgende Komponenten:

@import "colors"; 
@import "sizing/article"; 

.title { 
    @extend .danger; 
    @extend .title; 
    font-weight: bold; 
} 

Da das Gulp Skript die Anbieter-Verzeichnis einschließlich, wir relative Pfade für alle Dateien verwenden können. Wir importieren die zwei Dateien aus dem Verzeichnis des Herstellers und erweitern dann bei Bedarf verschiedene Klassen.

Das Ausführen von gulp sass erstellt die CSS-Dateien im Verzeichnis des Projekts des Projekts. Da ich nur scss/main.scss für Importe verwendete, wird es alle unsere Stile enthalten.

Haben Sie das versucht? Wenn ja, führe alles durch, was ich gerade geteilt habe und schau, ob es für dich funktioniert.

Lassen Sie mich wissen.

Am besten,

Answer 2

IncludePaths nimmt ein String-Array.

Versuchen Sie, auf Folgendes zu aktualisieren.

gulp.task('sass', function() { 
    gulp.src('./styles/**/*.scss') 
    .pipe(gulpSass({ includePaths: ['./vendor'] }).on('error', gulpSass.logError)); 
}); 

Siehe docs:

https://github.com/sass/node-sass#includepaths