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

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

1 个答案: