CODEWITHSUNDEEP
web-applicationsgulp
Taz
Taz

Reputation: 184

Gulp compile SCSS/SASS into separate files

I'm using the Yeoman Gulp webapp generator and running into an issue when I build.

I've currently got a project with SASS/SCSS. Right now, they are all compile into the main.css file, but my client wants to have all of the .scss files compile into separate .css files. I see the .scss files compiling into .css files in the .tmp folder, but when I build the project, they dont transfer over to the styles folder in the DIST folder. Do you know how i can change the gulp settings to do this? Basically convert all the .scss files into .css files and include them with the build when i do 'gulp' in the command line?

Upvotes: 1

Views: 1666

Answers (2)

LionOnTheWeb
LionOnTheWeb

Reputation: 346

Have you tried specifying the wildcard css output '*.css'?

For example:

var gulp = require('gulp');
var sass = require('gulp-sass');
var minify = require('gulp-minify-css');

gulp.task('scss', function(){
 gulp.src('.tmp/styles/*.scss')
  .pipe(plumber())
  .pipe(sass())
  .pipe(minify(*.css))
  .pipe(gulp.dest('dist/styles/*.css');
});

Upvotes: 0

silvenon
silvenon

Reputation: 2197

One way to do it is to:

  1. remove comment blocks around <link>s to your custom CSS files

  2. add this to your html task (before the return statement):

    gulp.src('.tmp/styles/*.css')
  .pipe($.minifyCss({compatibility: '*'}))
  .pipe(gulp.dest('dist/styles'));

  3. remove the leading underscore (_) from your .scss files (_base.scss → base.scss)

  4. @import variables, functions etc. into each file individually (when you want to use them), they aren't shared anymore because partials aren't @imported into main.css
  5. add a <link> for every stylesheet

Upvotes: 2

Related Questions