sass 文件，使用 gulp 编译和分离主题颜色文件

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