Question

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

我目前有一个SASS / SCSS项目。现在，它们都编译到main.css文件中，但我的客户端希望将所有.scss文件编译成单独的.css文件。我看到.scmp文件编译成.tmp文件夹中的.css文件，但是当我构建项目时，它们不会转移到DIST文件夹中的styles文件夹。你知道我怎么能改变gulp设置来做到这一点吗？基本上将所有的.scss文件转换为.css文件，并在构建时将它们包含在构建中，然后将其作为gulp＆＃39;在命令行？

Answer 1

一种方法是：

删除<link>周围的评论区块到您的自定义CSS文件

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

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

从_个文件（.scss→_base.scss）中删除前导下划线（base.scss）
@import变量，函数等单独分配到每个文件中（当您要使用它们时），它们不再共享，因为部分不会@import编入main.css < / LI>
为每个样式表添加<link>

Answer 2

您是否尝试过指定通配符css输出＆＃39; *。css＆＃39;？

例如：

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

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

2 个答案: