如何在 sass 中使用 gulp use-ref答案

【问题标题】：How to use gulp use-ref with sass如何在 sass 中使用 gulp use-ref
【发布时间】：2015-10-30 11:57:09
【问题描述】：

在我的项目中：

<!-- build:css css/error.css -->
<link rel="stylesheet" href="src/assets/styles/_bootstrap.scss" type="text/css" media="all">
<!-- endbuild -->

和 gulp 文件：

gulp.task('test', function () {
    return gulp.src('path_to_html')
        .pipe(gulp.src('path_to_styles'))
        .pipe(gulpif('path_to_styles', sass()))
        .pipe('path_to_styles'.restore())
        .pipe(useref())
        .pipe(gulp.dest('target_folder'));
});

如何先将 .scss 转换为 .css 再使用 use-ref。

【问题讨论】：

由于 sass 编译为单个 css 文件，我最终只是在我的 html 中引用了 sass 输出 css 文件，并且不对该文件使用注入

标签： sass gulp gulp-useref

【解决方案1】：

在我的项目中，我使用 gulp-rename 来做类似的事情。

.pipe(rename({ suffix: '.min' }))

安装gulp-rename。

在你的任务中这样做：

gulp.task('test', function () {
    return gulp.src('path_to_html')
        .pipe(gulp.src('path_to_styles'))
        .pipe(gulpif('path_to_styles', sass()))
        .pipe('path_to_styles'.restore())
        .pipe(rename({
            extname: ".css"
        }))
        .pipe(useref())
        .pipe(gulp.dest('target_folder'));
});

【讨论】：