Integrating Skeleton Sass into Dev Workflows

Guides on how to consume Skeleton Sass with various workflows.

1. Gulp
2. Rollup
3. Webpack

Gulp

Gulp is a workflow automation plugin powered by Node.js streams and a great alternative to other workflows like Grunt.

1. Setting up Gulp

   cd path/to/my_project
   npm init -y
   npm add gulp gulp-sass gulp-sourcemaps skeleton-sass-official --save-dev

2. Now that we have gulp and the plugin we need to compile sass to css we're ready to begin writing our gulpfile.js:

   touch gulpfile.js

   const path = require('path');
   const gulp = require('gulp');
   const sass = require('gulp-sass');
   const sourcemaps = require('gulp-sourcemaps');
   
   const SKELETON_SASS_PATH = path.join(__dirname, 'node_modules/skeleton-sass-official/skeleton/**/*');

   We can copy Skeleton Sass from node_modules if the path string is too long (i.e. Windows is complaining) by creating a simple copy task:

   gulp.task('copy', function () {
       return gulp.src(SKELETON_SASS_PATH)
     	   .pipe(gulp.dest('source/tpls/skeleton-sass'));
   });

   Next we need to create our build task that will compile our scss source into css:

   gulp.task('build:sass', function () {
       return gulp.src('source/sass/**/*')
           .pipe(sourcemaps.init())
           .pipe(sass().on('error', sass.logError))
           .pipe(sourcemaps.write())
           .pipe(gulp.dest('target'));
   });

3. Create skeleton.scss source file From here we create our skeleton.scss source file:

   // Use ../../node_modules/skeleton-sass-official/skeleton/ instead of 
   // ../tpls/skeleton-sass if you DID NOT use the copy task
   
   // Skeleton Sass Core Config
   @import "../tpls/skeleton-sass/core/config";
   
   // Import normalize.css for theme dependency
   @import "../../node_modules/normalize-scss/sass/normalize/import-now";
   
   // Skeleton Sass Theme Partials
   @import "../tpls/skeleton-sass/themes/fresh/vars";
   @import "../tpls/skeleton-sass/themes/fresh/include_components";
   @import "../tpls/skeleton-sass/themes/fresh/grid";
   
   // Import everything else below this line...

4. Build We're ready to build!

   gulp build:sass

   After executing this command we should see a new target directory that contains our compiled sass source