Compile sass with gulp-sass

Question

I'm trying to compile some .scss with the following Gulp task:

var gulp = require("gulp"),
    rimraf = require("rimraf"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    uglify = require("gulp-uglify"),
    sass = require('gulp-sass');

var paths = {
    webroot: "./wwwroot/"
};

paths.sass = paths.webroot + "lib/foundation-apps/scss/**/*.scss";

gulp.task('sass', function () {
  gulp.src(paths.sass)
    .pipe(sass())
    .pipe(gulp.dest(paths.webroot + '/css/'));

});

This is the output of the command:

but the following is the compile result:

Why only the foundation.scss is compiled?

rmjoia · Accepted Answer · 2016-01-30T18:16:42.893

Check the structure of the bower.json file for foundation-apps (in package folder).

If it's the same found on the project github repo, should be something like this:

...

  "main": [
    "scss/foundation.scss",
    "dist/js/foundation-apps.js",
    "dist/js/foundation-apps-templates.js"
  ],

...

which means that only the scss/foundation.scss file will be compiled. If you want to specify other files, you should create a override on your app bower.json file (on your root path)

Try to append to the end of the file something like this:

...

"overrides": {
    "foundation-apps": {
      "main": [
          "scss/foundation.scss",
          ... (all the other files you want) ...
          "dist/js/foundation-apps.js",
          "dist/js/foundation-apps-templates.js"
      ]
    }
}

...

In this way, you can update your versions without override your custom config (for the package folder default bower.json)

hope it helps.

Compile sass with gulp-sass

1 Answers1