How to use gulp use-ref with sass

Question

In the project I have:

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

and the gulp file:

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

How can I firstly transform .scss into .css and then use use-ref.

since sass compiles to a single css file i ended up just referencing the sass output css file in my html and don't use inject for that file — sam schonstal, Jan 17 '16 at 02:33

score 0 · Answer 1 · answered Oct 17 '16 at 14:31

On my project i use gulp-rename to do stuff like that.

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

Install gulp-rename.

And on your task do this:

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

How to use gulp use-ref with sass

1 Answers1