CODEWITHSUNDEEP
sassgulpgulp-sass
Jake
Jake

Reputation: 1

Gulp Sass Compile Issue

My Gulp SCSS Compiler below works fine with single files, and when including files into a single output e.g. styles.scss & _base.scss which would output styles.css.

However if I was two output files e.g. styles.css & base.css upon making the scss file 'base.scss' it complies it to the dest still with the .scss extension. Its not till I actually rerun the compile task till I get a base.css file as well as the base.scss file in the dest folder...

gulp.task('build-css', function() {
    return gulp.src('source/scss/**/*.scss', { style: 'expanded' })
        .pipe(plugins.sass())
    .pipe(gulp.dest('public_html/css'));
});

Im using node-sass. I do not want to use ruby-sass

Output in public_html/css/

What I'm getting

css/
- base.scss
- base.css
- style.css

what I want to get 

css/
- base.css
- style.css

Upvotes: 0

Views: 525

Answers (2)

erwstout
erwstout

Reputation: 1307

You are putting { style: 'expanded' } in the incorrect location of the function. Your function should look like this instead:

gulp.task('build-css', function() {
    return gulp.src('source/scss/**/*.scss')
        .pipe(plugins.sass({ style: 'expanded' }))
        .pipe(gulp.dest('public_html/css'));
});

Upvotes: 1

halfzebra
halfzebra

Reputation: 6807

There is no such an option as { style: 'expanded' } available in for gulp.src

To control the output style, you need to specify outputStyle and pass it as an argument with plugins.sass(options) call.

Upvotes: 0

Related Questions