Simple Build Script

The following is a simple example of how to build css from SCSS while using Skyline.

How to

Internally Skyline uses the ~ character to refer to its own node_modules directory.

For Skyline to work in your project, you must account for this configuration. Luckily it is a fairly low effort lift.

1. Install node sass tilde importer (yarn add -D node-sass-tilde-importer)
   • This will be used as the importer when you configure the sass compiler.
2. Make an entry point SCSS file that will provide Skyline features to the rest of your SCSS files
   • Add ~@skyline/scss/src/core/UI.required to the top of your main SASS file (App.scss in this example).
   • Optional: Try out a Skyline function! - Using the Example build script - echo body{background-color: get-gray(200);} >> App.scss

Example Build Script

The following script will take in a App.scss and output a app.css into the same folder.

By no means is this the only way to compile SCSS (Webpack (opens new window) and Gulp (opens new window) are currently in use at Benevity). This is only to illustrate a simple usage of node-sass-tilde-importer with the compiler.

// @file build.js

const fs = require('fs')
const sass = require('sass')
const tildeImporter = require('node-sass-tilde-importer')

// We use `renderSync()` here because `render()` is over 2x as slow due to the
// overhead of asynchronous callbacks.
const result = sass.renderSync({
  file: 'App.scss',
  importer: tildeImporter,
  outputStyle: 'compressed',
})

fs.writeFile('./app.css', result.css.toString(), (error) => {
  if (!error) {
    console.log('CSS File built')
  } else {
    console.error('Problem encountered while writing app.css to disk.', error)
  }
})

Create App.scss, add Skyline, and create some custom CSS:

echo "@import '~@skyline/scss/src/core/UI.required';body{background-color: get-gray(200);}" > App.scss

Warning: the above command will overwrite App.scss if it already exists!

To compile App.scss -> app.css run node build.js from your command line.

The resulting app.css file's content will be:

body {
  background-color: #f5f5f5;
}

Notice that get-gray(200) has been turned into #f5f5f5 through the magic of SCSS and Skyline.