Gulp SASS - Użyj @import bez kompilowania scss -> css

Question

Wiem, że to prawdopodobnie dziwne pytanie, ale trzymaj się mnie. :)

Czy można użyć gulp sass (lub innych wtyczek gulp) do odczytu pojedynczego pliku .scss z wieloma instrukcjami @import i zaimportować/połączyć wszystkie te @ importowane pliki do pojedynczego pliku .scss czyli nie skompilowany do CSS?

Informacje podstawowe: Pobrałem podstawowe pliki .scss Bootstrap i FontAwesome i połączyłem je w jeden główny plik .scss. Teraz chcę, aby wszystkie pliki w instrukcjach @import w jeden plik .scss.

Inną opcją, o której pomyślałem, było użycie narzędzia concat, ale czy nie musiałbym ręcznie określać każdego pliku, który ma zostać dołączony do pliku gulp? Popraw mnie, jeśli się mylę.

Przykład czego szukam:

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

Imports

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

I

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

Aby

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

Zauważ, że @import s są zawarte w pliku final.scss, ale nie ma żadnej kompilacji z SCSS -> CSS.

Answer 1

Natknąłem się na ten sam problem. Ten ci pomoże. Chociaż ma pewne wady (zapomnij o nazwach plików poprzedzonych podkreśleniem - oto, co znalazłem do tej pory).

the npm package that is build especially for this purpose

Disclaimer: Nie zamierzam wyjaśnić w jaki sposób prace KMP, zakładam, że autor wie, co jest pakiet npm jeśli chce korzystać z wtyczki haustem. Nie usuwaj mojej odpowiedzi tylko dlatego, że nie opisuję wyraźnie, co jest oczywiste dla osoby, która stawiła pytanie. Aby zapobiec usunięciu tej odpowiedzi jako brak kontekstu, przytaczam opis pakietu.

import Resolve
oświadczenia resolve @import w arkuszach

Co to
Co jeśli masz jakieś mniej lub rysikiem pliki, które chcesz, aby rozbić razem do głównego pliku, bez kompilacja do css? Po prostu użyj funkcji import-resolve i spełnią się wszystkie Twoje marzenia. Wszystkie instrukcje @import zostaną rozwiązane i pozostanie ci jeden plik zawierający wszystkie twoje cenne mixiny, zmienne i deklaracje.

Korzystanie import-rozwiązać

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

Tak, możesz użyć gulp-scss do tego lub gulp-ruby-sass. Teraz jest kilku, którzy Gulp już od jakiegoś czasu istnieją.

łyk-Sass skompilować Sass plików https://www.npmjs.com/package/gulp-sass

łyk-rename do zmiany nazwy plików do folderu dystrybucyjnego https://www.npmjs.com/package/gulp-rename

w moim przypadku Używam obecnie haustem-SCSS. Możesz po prostu uruchomić zadanie dla swoich potrzeb w taki sposób. W poniższym przykładzie plik base.scss byłby twoim plikiem scss z wszystkimi instrukcjami @import.

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/')); 
}); 

Aktualizacja:

Zakładając masz już base.scss utworzony, który ma już swoje wypowiedzi importu. Powyższa metoda powinna działać. Po prostu uruchamiamy zadanie scss na podanym pliku, zmieniamy jego nazwę i przenosimy do dowolnego katalogu docelowego.

Aktualizacja 2

ustalający zmiennych będzie wymagać, aby użyć metody concat jak wszystkich wtyczek Sass są tylko dla kompilacji Sass do css. Nie musisz określać wszystkich swoich plików. Po prostu zmienne najpierw, a następnie możesz uruchomić glob dla wszystkich niestandardowych sass. Upewnij się, że podążasz za podobną strukturą folderów, która znajduje się w poniższej tabeli, w celu właściwego rozdzielenia i organizacji zasobów.

Nie musisz też martwić się o plik importu. Nie będzie takiej potrzeby, a za pomocą tej metody będzie mniej do zarządzania.

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/')); 
};