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

Rollup

Rollup.js is a modern-day module bundler that is similar to webpack. This allows us to create dynamic applications and import our resources into frameworks like Vue.js, React.js, or Angular.js using import semantics.

Rollup.js is not gulp. It will not automate your development workflow; however, it will integrate it into our development workflow.

1. Project Structure

   .
   ├── package.json
   ├── rollup.config.js
   └── source
       ├── app.js
       └── sass
       	└── skeleton.scss

2. Install Dependencies

   npm init -y
   npm i gulp node-sass rollup rollup-plugin-sass
   touch rollup.config.js

3. Write the Config File

   import sass from 'rollup-plugin-sass';
   
   export default {
       input: 'source/app.js',
     	output: {
           file: 'build/bundle.js',
         	format: 'cjs'
       },
       plugins: [sass({
           output: 'build/bundle.css'
       })]
   };

4. Create app.js file

   import './sass/skeleton.scss';
   
   // do stuff...

5. Build

   Let's build by command line first:

   ./node_modules/.bin/rollup -c

   Check out build and you'll see two files:

   1. bundle.js
   2. bundle.css

6. Build with Gulp

   Don't want to build via command line? Not to worry. Let's modify our gulpfile.js a bit:

   const path = require('path');
   const gulp = require('gulp');
   const rollup = require('rollup');
   const rollupSassPlugin = require('rollup-plugin-sass');
   
   const SKELETON_SASS_PATH = path.join(__dirname, 'node_modules/skeleton-sass-official/skeleton/**/*');
   
   gulp.task('build', async function () {
   	const bundle = await rollup.rollup({
   		input: './source/app.js',
   		plugins: [require('rollup-plugin-sass')({ output: 'build/bundle.css' })]
   	});
   
   	await bundle.write({
   		file: './build/bundle.js',
   		format: 'cjs',
   		name: 'library',
   		sourcemap: true
   	});
   });

   Viola! Gulp.js + Rollup.js building our scss files!