Merge multiple scss files into one css file

Question

I'd like to merge all of my scss files into one compressed css file:

Structure:

stylesheets/
- test.scss
- test2.scss
gulpfile.js

I tried this two tasks, which I found in several answers and tutorials, but I always got the scss file into a duplicated css file:

gulp.task('sass', function() {
    return gulp.src('stylesheets/**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('css/'))
});

and

gulp.task('sass', function() {
    return gulp.src('stylesheets/**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('css/styles.css'))
});

!!! EFFECTIV RESULT !!!

stylesheets/
- test.scss
- test2.scss
css/
- test.css
- test2.css
gulpfile.js

or with second tried task:

stylesheets/
- test.scss
- test2.scss
css/styles.css/
- test.css
- test2.css
gulpfile.js

??? EXPECTED RESULT ???

stylesheets/
- test.scss
- test2.scss
css/
- styles.css
gulpfile.js

Any ideas?

You just need to add a concat(styles.css) call after the sass(). Look at gulp-concat. — Mark, Nov 16 '17 at 18:04
@Mark Works, thanks! Can you please make an example for the others, so I can mark it as correct. Cheers — webta.st.ic, Nov 16 '17 at 18:23

score 11 · Accepted Answer · answered Nov 17 '17 at 13:24

You indicated that you want to merge your files into one file and compress that file, so you need to add two plugins to do each of those.

Gulp-concat and gulp-uglify

const concat = require('gulp-concat');
const uglify = require('gulp-uglify');

gulp.task('sass', function() {
return gulp.src('stylesheets/**/*.scss')
  .pipe(sass())
  .pipe(concat('styles.css'))
  .pipe(uglify())

  // .pipe(rename({
   //  basename: "styles",
   //   suffix: ".min",
   //   extname: ".css"
  //  }))

  .pipe(gulp.dest('css'))
});

In addition, you may want to add gulp-rename to indicate that the file has been uglified/minified via a .min.css extension (and change your html link to point to that filename).

Although concat will work I believe the OP should first consider using sass partials. It is very simple and keeps the code well organized. Concat might be good for logically separated stylesheets. Here's a quick explanation - https://stackoverflow.com/a/34890015 So in stylesheets folder use single scss file to import modules with import rules for example @import "components/cards"; and then create modules beginning with underscore (e.g. stylesheets/components/_cards.scss). Gulp will compile all into single file without any additional configuration. — Rych, May 06 '20 at 13:09

score 1 · Answer 2 · answered Nov 16 '17 at 21:59

1

Hope this hepls.

gulp.task('styles', () => {
  gulp.src([path.src.sass])
    .pipe(sassGlob())
    .on('error', util.log)
    .pipe(sass({
       includePaths: ['src/scss'],
    }))
    .on('error', util.log)
    .pipe(gulp.dest(path.dist.css))
});

answered Nov 16 '17 at 21:59

Juandres Yepes Narvaez

154
5

Merge multiple scss files into one css file

2 Answers2