@wok-cli/plugin-sass v1.0.3
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
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 |
- 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).