Gulp SASS - @import ohne kompilieren scss verwenden -> css

Question

Ich weiß, das ist wahrscheinlich eine seltsame Frage, aber bleib bei mir. :)

Ist es möglich, gulp sass (oder andere gulp plugins) zu verwenden, um eine .scss-Datei mit mehreren @import-Anweisungen zu lesen, und alle importierten Dateien in eine einzige .scss-Datei zu importieren/concat das ist nicht nach CSS kompiliert?

Hintergrundinformationen: Ich habe die Bootstrap und FontAwesome Basis. SCSD-Dateien und kombiniert sie in eine einzige .SCS-Datei. Ich möchte nun alle Dateien in den @ import-Anweisungen in eine einzige .scss-Datei übertragen.

Eine andere Option, die ich dachte, war, nur ein concat-Tool zu verwenden, aber müsste ich dann nicht manuell jede Datei angeben, die in der Schluckdatei enthalten sein soll? Korrigiere mich, wenn ich falsch liege.

Beispiel von dem, was ich suche:

//base.scss 
@import foo; 
@import bar; 

Importe

//foo.scss 
$my-font-size:20px; 

Und

//bar.scss 
body { 
    div { 
    font-size:$my-font-size; 
    } 
} 

Damit

//final.scss 
$my-font-size:20px; 
body { 
    div { 
    font-size:$my-font-size; 
    } 
} 

Beachten Sie, dass die @import s in der final.scss Datei enthalten sind, aber es gibt keine Kompilierung von SCSS -> CSS.

Answer 1

Ich bin über das gleiche Problem gestolpert. Dieser wird dir helfen. Obwohl es einige Fehler hat (vergiss Dateinamen, die mit Unterstrichen versehen sind - das habe ich bis jetzt gefunden).

the npm package that is build especially for this purpose

Disclaimer: Ich werde nicht erklären, wie ich die npm Werke tut, gehe ich davon aus Autor weiß, was npm Paket ist, wenn er schlucken Plugin verwenden möchte. Bitte entfernen Sie meine Antwort nicht, nur weil ich nicht unnötig explizit schreibe, was für Person offensichtlich ist, die eine Frage akked. Um das Löschen dieser Antwort als fehlenden Kontext zu verhindern, zitiere ich die Paketbeschreibung.

Import Entschlossenheit
resolve @import Aussagen in Stylesheets

Was dies bedeutet
Was ist, wenn Sie einige weniger oder Stift Dateien, die Sie zusammen in eine Master-Datei zerschlagen wollen, ohne kompilieren zu CSS? Verwenden Sie einfach Import-Resolve und alle Ihre Träume werden wahr. Alle @ import-Anweisungen werden aufgelöst und Sie erhalten eine Datei mit all Ihren wertvollen Mixins, Variablen und Deklarationen.

Mit

npm install import-resolve 
// some-node-thing.js 
var importResolve = require('import-resolve'); 

// spits out a master dist file with all your wonderful stylesheet 
// things concatenated 
importResolve({ 
    "ext": "less", 
    "pathToMain": "path/to/main.less", 
    "output": "path/to/output.less" 
}); 

// if you don't specify an output file, output accepts a callback parameter 
// and passes the concatenated file text 
var output = importResolve({ 
    "ext": "styl", 
    "pathToMain": "path/to/main.styl" 
}, function (output) { 
    fs.writeFile('foo.styl', output, function(){ 
     console.log('did it myself.'); 
    }); 
}); 

Answer 2

Ja, Sie können gulp-scss für diese oder Schluck-Rubin-Sass verwenden. Es gibt jetzt ein paar da draußen, dass Gulp schon eine Weile da ist.

schluck-Sass Sass Dateien https://www.npmjs.com/package/gulp-sass

schluck-Umbenennungs zu kompilieren, um die Dateien für den Distributionsordner umbenennen https://www.npmjs.com/package/gulp-rename

In meinem Fall habe ich zur Zeit Schluck-SCSS verwende. Sie können so einfach eine Aufgabe für Ihre Bedürfnisse ausführen. Im folgenden Beispiel wäre base.scss Ihre scss-Datei mit all Ihren @ import-Anweisungen.

var gulp = require('gulp'), 
    scss = require('gulp-scss'), 
    rename = require('gulp-rename'); 

gulp.task('sass', function() { 
    gulp.src('base.scss') 
    .pipe(scss()) 
    .pipe(rename('final.scss')) 
    .pipe(gulp.dest('assets/css/')); 
}); 

Update:

Angenommen, Sie haben bereits die base.scss erstellt, die bereits Ihre Import-Anweisungen hat. Die obige Methode sollte funktionieren. Wir führen den scss-Task einfach in der bereitgestellten Datei aus, benennen ihn um und verschieben ihn in das Zielverzeichnis.

Update 2

die Variablen Halte benötigen Sie die concat Methode als alle der sass Plugins zu verwenden sind nur für Sass CSS kompilieren. Sie müssen nicht alle Ihre Dateien angeben. Nur die Variablen zuerst, und dann können Sie einen Glob für alle Ihre benutzerdefinierten Sass ausführen. Stellen Sie nur sicher, dass Sie einer ähnlichen Ordnerstruktur folgen, die sich in dem Array unten befindet, um Assets ordnungsgemäß zu trennen und zu organisieren.

Sie müssen sich auch keine Gedanken über die Pflege einer Importdatei machen. Es wird nicht nötig sein und es wird weniger mit dieser Methode zu schaffen sein.

var gulp = require('gulp'), 
    concat = require('gulp-concat'); 

var sassConcat = [ 
    'sass/variables.scss', 
    'sass/modules/**/*.scss' 
]; 

gulp.task('sass', function() { 
    gulp.src(sassConcat) 
    .pipe(concat('final.scss')) 
    .pipe(gulp.dest('../assets/sass/')); 
};