gulp-sass 多个 css 版本答案

【问题标题】：gulp-sass multiple css versionsgulp-sass 多个 css 版本
【发布时间】：2020-03-11 20:34:42
【问题描述】：

基于foundation 6.4的gulb文件，我编译了我的sass文件。目标是编译 app.css 和 backend.css 和 rte.css

var gulp          = require('gulp');
var $             = require('gulp-load-plugins')();
var autoprefixer  = require('autoprefixer');

var sassPaths = [
  'node_modules/foundation-sites/scss',
  'node_modules/motion-ui/src'
];

function sass() {
  return gulp.src('scss/app.scss')
    .pipe($.sass({
      includePaths: sassPaths
    }).pipe(gulp.dest('css'));
};

function rte() {
  return gulp.src('scss/Rte.Default.scss')
    .pipe($.sass({
      includePaths: sassPaths
    }).pipe(gulp.dest('css'));
};

function backend() {
  console.log('Backend\n');
  return gulp.src('scss/Custom.Backend.scss')
    .pipe($.sass({
      includePaths: sassPaths
    })
    .pipe(gulp.dest('css'));
};

function serve() {
  gulp.watch("scss/**/*.scss", sass);
};

// define the tasks
gulp.task('sass', sass);
gulp.task('rte', rte);
gulp.task('backend', backend);
gulp.task('serve', serve);

gulp.task('default', gulp.series([sass, rte, backend, serve]));

不幸的是，我可以单独编译 app、rte、后端（注释掉其他任务），但我不能一次编译所有这些。

我只得到“app.css”，而不是其他文件。我有点迷失在 gulp/references 中，尝试了某些“相似”的脚本/提示/提示 - 但我总是失败。

你知道吗？我相信你会的！感谢您的帮助！

【问题讨论】：

您是否尝试将其他两个 scss 文件导入到您的 app.scss 文件中？然后 gulp 知道要渲染什么。
我希望它们分开。 3 用于不同目的的文件。没有一个怪物 CSS
你的意思是把它们结合起来，为什么要把它们分开呢？但在这种情况下，您需要让 Gulp 将每个 scss 文件分别渲染为一个唯一的 css 文件。
如果你丢失了数组符号怎么办：在你的default任务中使用gulp.series(sass, rte, backend, serve)？
您没有收到错误消息？它是否说它正在开始和完成任务rte和backend和sass？

标签： sass gulp

【解决方案1】：

此代码存在问题：

function sass() {
  return gulp.src('scss/app.scss')
    .pipe($.sass({
      includePaths: sassPaths
    }).pipe(gulp.dest('css'));    // problem here
};

由于您的风格，它有点模糊，但您缺少)

   })).pipe(gulp.dest('css'));    // correct

在其他任务中也是如此。

【讨论】：

感谢您指出这个问题：我确实删除了一些不感兴趣的行......脚本运行至今，除了多个文件的问题