Search code examples
gulpgulp-sass

Compile sass with gulp-sass

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:

enter image description here

but the following is the compile result:

enter image description here

Why only the foundation.scss is compiled?

Solution

  • 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.