Как скомпилировать несколько тем в gulp-sass?

Я пытался скомпилировать несколько тем, используя одни и те же файлы. Моя структура папок, как показано ниже

-styles
  green.scss
  red.scss
  -scss
     -control1.scss
     -control2.scss

Мне нужен вывод CSS-файлов control1 и control2 на основе зеленой и красной тем.

     var gulp = require('gulp');         
     var sass = require('gulp-sass');
     var config = {
        includePaths: [
          './styles/green.scss',
          './styles/red.scss'       
        ]       
    };
     gulp.src('./styles/scss/*.scss')
        .pipe(sass(config).on('error', sass.logError))
        .pipe(gulp.dest('./style/css/'));

Я новичок в gulp-sass, и кто-нибудь, пожалуйста, предложите, есть ли какая-либо опция, доступная в gulp-sass или node-sass для создания нескольких тем?

Мне нужно получить вывод как

-styles
 -css
   -green.control1.css
   -green.control2.css
   -red.control1.css
   -red.control2.css

css sass node-sass gulp-sass
person Son04    schedule 09.05.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я бы изменил организацию ваших файлов на настройку ниже. Далее я объясню новые файлы:

-styles
  main-green1.scss
  main-green2.scss
  main-red1.scss
  main-red2.scss  

  - colors
    - green.scss
    - red.scss
  -controls
     -control1.scss
     -control2.scss

Что касается этих новых .scss файлов. Каждый файл будет импортировать файл цвета и файл управления. Например, main-green1.scss будет:

@import 'colors/green';
@import 'controls/control1';

И main-green2.scss будет:

@import 'colors/green';
@import 'controls/control2';

Пока имена переменных в green.scss и red.scss одинаковы, вы получите желаемый результат. Вот более подробный пример:

green.scss

$color: #00cc00;
$background: #003300;

red.scss

$color: #e50000;
$background: #330000;

control1.scss

body {
  background-color: $background;
  color: $color;
}

control2.scss

body {
  background-color: $color;
  color: $background;
}

Вы должны изменить свой скрипт Gulp, чтобы создать новые файлы main-. Скомпилированные файлы будут такими:

main-green1.css

body {
  background-color: #00cc00;
  color: #003300;
}

main-green2.css

body {
  background-color: #003300;
  color: #00cc00;
}

main-red1.css

body {
  background-color: #e50000;
  color: #330000;
}

main-red2.css

body {
  background-color: #330000;
  color: #e50000;
}
person Brett DeWoody    schedule 10.05.2016