Gulp 将 SCSS/SASS 编译成单独的文件答案

【问题标题】：Gulp compile SCSS/SASS into separate filesGulp 将 SCSS/SASS 编译成单独的文件
【发布时间】：2015-07-27 14:27:51
【问题描述】：

我正在使用Yeoman Gulp webapp generator，在构建时遇到了问题。

我目前有一个使用 SASS/SCSS 的项目。现在，它们都编译成 main.css 文件，但我的客户希望将所有 .scss 文件编译成单独的 .css 文件。我看到 .scss 文件编译成 .tmp 文件夹中的 .css 文件，但是当我构建项目时，它们不会转移到 DIST 文件夹中的样式文件夹。你知道我如何改变 gulp 设置来做到这一点吗？基本上将所有 .scss 文件转换为 .css 文件，并在我在命令行中执行“gulp”时将它们包含在构建中？

【问题讨论】：

标签： web-applications gulp

【解决方案1】：

一种方法是：

将 <link>s 周围的注释块移除到您的自定义 CSS 文件中

将此添加到您的 html 任务中（在 return 语句之前）：

gulp.src('.tmp/styles/*.css')
  .pipe($.minifyCss({compatibility: '*'}))
  .pipe(gulp.dest('dist/styles'));

从您的 .scss 文件中删除前导下划线 (_) (_base.scss → base.scss)
@import 变量、函数等单独放入每个文件（当您想使用它们时），它们不再共享，因为部分不是 @imported 到 main.css
为每个样式表添加一个<link>

【讨论】：

【解决方案2】：

您是否尝试过指定通配符 css 输出“*.css”？

例如：

var gulp = require('gulp');
var sass = require('gulp-sass');
var minify = require('gulp-minify-css');

gulp.task('scss', function(){
 gulp.src('.tmp/styles/*.scss')
  .pipe(plumber())
  .pipe(sass())
  .pipe(minify(*.css))
  .pipe(gulp.dest('dist/styles/*.css');
});

【讨论】：