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'));
   });

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

3. 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!

Webpack

Webpack is argubly the leader in modern web tooling. It allows us to bundle nearly everything into small bundles we can import into react, angular, vue, and other front-end frameworks.

Like rollup.js, webpack can be integrated into a gulp workflow via plugin: gulp-webpack.

1. Project Structure

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

2. Install Dependencies

   yarn init -y
   yarn add webpack style-loader css-loader sass-loader --dev

3. Write a Config File

   const webpack = require('webpack');
   const path = require('path');
   
   module.exports = {
       entry: './source/app.js',
       output: {
           path: path.resolve('build'),
           filename: 'index_bundle.js'
       },
       module: {
           loaders: [
               {
                   test: /\.s[ac]ss$/, // import css from 'foo.less';
                   use: [
                       'style-loader', // creates <style> nodes from JS strings
                       'css-loader', // converts CSS inot CommonJS
                       'sass-loader' // compiles Sass to CSS
                   ]
               }
           ]
       },
       devtool: 'inline-source-map'
   };

4. Build

   ./node_modules/.bin/webpack --progress

   Done! Webpack is now building our .sass and .scss files!

5. Production Ready

   If we want to use Skeleton Sass in production with webpack, we need some modifications as we don't want our styles to be dependent on .js source. Let's create a new production config file:

   cp webpack.config.js webpack.prod.config.js

   we need to add another plugin:

   yarn add extract-text-webpack-plugin --dev

   let's revise now:

   const webpack = require('webpack');
   const path = require('path');
   const ExtractTextPlugin = require('extract-text-webpack-plugin');
   
   const extractSass = new ExtractTextPlugin({
       filename: '[name].[contenthash].css',
       disable: process.env.NODE_ENV === 'development'
   });
   
   module.exports = {
       entry: './source/app.js',
       output: {
           path: path.resolve('build'),
           filename: 'index_bundle.js'
       },
       module: {
           rules: [
               {
                   test: /\.scss$/,
                   use: extractSass.extract({
                       use: [
                           { loader: 'css-loader' },
                           { loader: 'sass-loader' }
                       ],
                       // use style-loader in development
                       fallback: 'style-loader'
                   })
               }
           ]
       },
       devtool: 'inline-source-map',
       plugins: [ extractSass ]
   };

   ^{source from style-loader repo}