Wok Sass Plugin

Sass pre-processing support plugin for Wok. Implements gulp-sass and Dart Sass.

| Hook types | Production only | Purpose | | ---------- | --------------- | --------------- | | lazypipe | no | style rendering |

• Installation
• Parameters
• Usage
  • Custom functions
    • build-env()
    • target-env()
    • map-to-JSON($map)
    • asset-url($path)
    • image-width($path), image-height($path)
    • inline-image($path)

Installation

This plugin requires @wok-cli/core and sass as peer dependencies.

npm i @wok-cli/core sass @wok-cli/plugin-sass --save-dev

Parameters

Configuration path: sass.

| parameter | type | default | note | | -------------- | ------------------ | ------------------ | ---------------------------- | | includePaths | stringstring[] | ['node_modules'] | include paths (1) | | functions | function | see below | Sass custom function |

1. sass includePaths options enhanced with support for environment templates.

All other parameters will be used as node-sass configuration options.

Usage

This plugin can be used to provide Sass support to @wok-cli/task-styles.

const $ = require('@wok-cli/core');
const styles = require('@wok-cli/task-styles');
const sass = require('@wok-cli/plugin-sass');

const styleTask = $.task(styles, {
  src: ['src/assets/css/**/*.scss'],
  dest: 'public/assets/css',
});

styleTask.tap('pre', 'sass', sass);

exports.styles = styleTask;

Custom functions

You can extend Sass with custom functions with the functions parameter:

const $ = require('@wok-cli/core');
const styles = require('@wok-cli/task-styles');
const sass = require('@wok-cli/plugin-sass');

const styleTask = $.task(styles, {
  src: ['src/assets/css/**/*.scss'],
  dest: 'public/assets/css',
+ 'hooks:pre': {
+   sass: {
+     function(env, api) {
+       return {
+         // ...
+       };
+     },
+   },
+ },
});

styleTask.tap('pre', 'sass', sass);

exports.styles = styleTask;

The functions parameter receives the Wok environment and API objects and must return an object with functions. See the official node-sass documentation for details.

By default the plugin provides the following functions:

build-env()

Returns either 'production' or 'development' based on the production Wok environment variable.

target-env()

Returns the current deploy target as defined by the --target CLI argument.

map-to-JSON($map)

Returns a JSON stringified version of a Sass map.

| parameter | type | default | note | | --------- | ---- | ------- | -------------- | | $map | map | | input Sass map |

asset-url($path)

Prepends the publicPath environmental variable to the passed in $path string

This function is useful when the public path of a project changes baed on the target.

image-width($path), image-height($path)

Return respectively the width and height of an image in pixels. $path is relative to the current working directory.

inline-image($path)

Returns an url() function containing inline image data. $path is relative to the current working directory.

Uses datauri for all images except for SVGs that are encoded (learn why).