Gulp Sass Compile Issue

Question

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

score 1 · Answer 1 · answered Dec 30 '15 at 21:36

1

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

answered Dec 30 '15 at 21:36

erwstout

1,277
1
13
30

++ its `outputStyle: expanded` not `style: 'expanded'`: https://github.com/sass/node-sass – hexangel616 Jan 14 '20 at 12:25

score 0 · Answer 2 · answered Jul 14 '15 at 14:41

0

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.

answered Jul 14 '15 at 14:41

halfzebra

6,771
4
32
47

Gulp Sass Compile Issue

2 Answers2