SASS файлов, компилировать и раздельные тему-цветные файлы с глотком

Question

У меня есть структура папок, как это:

|- assets 
    |- sass 
      global.scss 
      _mixin.scss 
      _body.scss 
      _header.scss 
      _footer.scss 
      |- themes 
       blue.scss 
       base.scss 
       dark.scss 

Я хочу собрать свои Sass файлы и получить эту CSS структуру из него (самого главного что я хочу отдельные файлы CSS для моего цвета):

|- assets 
    |- cdd 
      global.css 
      |- themes 
       blue.css 
       base.css 
       dark.css 

Я использую этот gulpfile.js файл для компиляции этой

'use strict'; 

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

// Gulp plumber error handler 
function errorLog(error) { 
    console.error.bind(error); 
    this.emit('end'); 
} 

// Compile Sass files into CSS 
gulp.task('sass', function() { 
return gulp.src('./assets/sass/**/*.scss') 
      // Sass - Compile Sass files into CSS 
      .pipe(sass({ 
       outputStyle: 'expanded', 
       includePaths: ['./assets/sass/'] 
      })) 
     .on('error', errorLog) 
      .pipe(gulp.dest('./assets/css')) 
}); 

gulp.task('default', ['sass']); 

не делает отдельный цветной файл для меня, а файлы цветных тем добавляются в конец файла global.css.

Answer 1

То, как я создал разные темы для проекта, заключалось в том, чтобы разделить мой scss;

|- scss 
|- |- core 
|- |- |- _all-my-scss-files-and-folders.scss 
|- |- |- _config.scss 
|- |- |- core.scss 
|- |- themes 
|- |- |- blue.scss 
|- |- |- yellow.scss 
|- |- |- pink.scss 

В _config.scss вы установили по умолчанию цветовой схемы

$colour-primary-main: #FFF !default; 
$colour-primary-secondary: #EEE !default; 
$colour-primary-tetiary: #E0E0E0 !default; 
$colour-primary-quaternary: #R4R4R4 !default; 

В ваших темах SCSS файлов, которые вы перезаписать переменные, а затем @import ваших обертоны

$colour-primary-main: #333; 
$colour-primary-secondary: #000; 
$colour-primary-tetiary: #444; 
$colour-primary-quaternary: #FEFEFE; 

@import '../core/config'; 
etc 

Затем вам нужно будет настроить новая задача gulp, которая компилирует ваши файлы SCSS темы

gulp.task('sass-theme', function() { 
    return gulp.src('assets/sass/theme/*.scss') 
    .pipe(sass({ 
     outputStyle: 'expanded', 
    })) 
    .on('error', errorLog) 
    .pipe(gulp.dest('./assets/css')) 
}); 

Вам также нужно будет игнорировать папку новые темы на вашем умолчанию задачи SCSS

gulp.task('sass', function() { 
    return gulp.src([ 
     'assets/sass/**/*.scss', 
     '!assets/sass/themes/*.scss'; 
    ]) 
    .pipe(sass({ 
     outputStyle: 'expanded', 
    })) 
    .on('error', errorLog) 
    .pipe(gulp.dest('./assets/css')) 
});