Скомпилируйте все файлы в подпапке из SASS в CSS - PullRequest
Новая
       12

Скомпилируйте все файлы в подпапке из SASS в CSS

0 голосов
/ 27 марта 2020

Я пытаюсь скомпилировать набор файлов s css в один файл css. Например, вот моя структура папок: 

theme
    - assets
       - src
         - sass
            - config
               - _grid-system.scss
               - _variables.scss
            - _client-styles.scss
            - _typography.scss
         - styles.scss

Исходя из вышесказанного, я собираюсь скомпилировать _client-styles.scss и _typography.scss в один css файл. Этот новый CSS файл будет находиться в той же папке и будет называться core. css (будет находиться в папке sass).

У меня есть gulpfile.js, который компилирует все .scss файлы в css в той же папке. Но не знаю, как приблизиться к этому преобразованию, поскольку я хочу игнорировать файл styles.scss.

Текущий gulpfile.js: 

'use strict';

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

var paths = {
    styles: {
        src: 'modules/**/*.scss',
        dest: 'modules'
    }
}

function scss() {
    return gulp.src(paths.styles.src)
        .pipe(sass().on('error', sass.logError))
        .pipe(sass({ outputStyle: 'compressed' }))
        .pipe(postcss([autoprefixer()]))
        .pipe(gulp.dest(paths.styles.dest));
}
exports.scss = scss
function watch() {

    scss();

    gulp.watch(paths.styles.src, scss);
}
exports.watch = watch

Как выглядит styles.scss (для справки ): 

@import "config/**.scss";  
@import "client-styles.scss";
@import "typography.scss";

Как мне go об этом? Скомпилируйте файл '_client-styles.s css' и '_typography.s css' в 'core. css', который будет находиться в папке sass:

theme - assets - src - sass - config - _grid-system.scss - _variables.scss - _client-styles.scss - _typography.scss - styles.scss - core. css (новый файл здесь)

...