esbuild-stylus-loader
v0.4.3
Published
esbuild plugin for stylus files
Downloads
3,015
Readme
esbuild-stylus-loader
Esbuild plugin for stylus files.
Installation
npm install esbuild-stylus-loader stylus
or
yarn add esbuild-stylus-loader stylus
Example
build.js
const {build} = require('esbuild')
const {stylusLoader} = require('esbuild-stylus-loader')
build({
entryPoints: [
'src/index.js',
],
bundle: true,
outdir: 'dist',
plugins: [
stylusLoader({
stylusOptions: {
define: [
['BG_IMAGE', 'https://domain.com/image.jpeg'],
],
},
})
],
}).then(result => {})
src/index.js
import './style.styl'
console.log('hello world')
src/style.styl
html
background-image url(BG_IMAGE)
command line
node ./build.js
Arguments
stylusLoader({
stylusOptions: {
/**
* @see https://stylus-lang.com/docs/js.html#includepath
* @type {string[]}
*/
include: ['./some/path'],
/**
* @see https://stylus-lang.com/docs/js.html#importpath
* @type {string[]}
*/
import: [
path.resolve(__dirname, 'path'),
path.resolve(__dirname, 'another-path'),
],
/**
* @see https://stylus-lang.com/docs/js.html#usefn
* @type {Function[]}
*/
use: [
(stylus) => {
stylus.define('URL', 'domain.com')
},
],
/**
* @see https://stylus-lang.com/docs/js.html#definename-node
* @type {[string, any, boolean?][]}
*/
define: [
['BG_IMAGE', 'https://domain.com/image.jpeg'],
/** The third argument allows to insert raw data */
['BG_IMAGE', 'https://domain.com/image.jpeg', true],
],
/**
* Stylus will include css file content via @import "./file.css" keyword.
* @type {boolean}
*/
includeCss: false,
},
})