# Stylesheets
Parse CSS and add vendor prefixes to rules by Can I Use.
Autoprefixer uses Browserslist.
# styles.extname
styles.extname: string = 'css'
Compiling PostCSS/Sass/Less into CSS.
Supported CSS extensions:
css
,scss
/sass
andless
.
π° For example:
balm.config = {
styles: {
extname: 'scss'
}
// Other Options...
};
# styles.minified
styles.minified: boolean = false
Ignore the environment and force CSS compression.
Tips: Often used with
mix.serve
in development mode.
# styles.atImportPaths
styles.atImportPaths: string[] = []
An array of paths that Balm can look in to attempt to resolve your @import
declarations.
# styles.options
styles.options: object
Cssnano optimisations. Reference options.
Defaults to:
{
safe: true,
autoprefixer: false,
discardComments: {
removeAll: true
}
}
# styles.sassOptions
styles.sassOptions: object = {}
LibSass options.
# styles.lessOptions
styles.lessOptions: object = {}
Less plugin for Gulp. Reference options.
# styles.postcssEnvOptions
styles.postcssEnvOptions: object
PostCSS Preset Env options.
Defaults to:
{
stage: 0,
autoprefixer: {
flexbox: 'no-2009'
}
}
# styles.postcssPlugins
styles.postcssPlugins: object[] = []
PostCSS plugins.
# styles.postcssLoaderOptions
interface PostcssLoaderOptions {
exec?: boolean;
parser?: string | object;
syntax?: string | object;
stringifier?: string | object;
config?: object;
plugins?: object[] | Function; // NOTE: The same to `styles.postcssPlugins`
sourceMap: string | boolean;
}
styles.postcssLoaderOptions: PostcssLoaderOptions = { sourceMap: false }
PostCSS loader for webpack. Reference options.
# styles.imageBasePath
styles.imageBasePath: string = '../'
The path to use in CSS referring to sprite image location.
# styles.sprites
styles.sprites: string[] = []
Convert a set of images into a spritesheet and CSS variables.
π° For example:
// Input:
// `/path/to/workspace/${roots.source}/${paths.source.img}/icons/*.png`
balm.config = {
styles: {
sprites: ['icons']
}
// Other Options...
};
// Output:
// image: `/path/to/workspace/${roots.target}/${paths.target.img}/icons-sprites.png`
// css: `/path/to/workspace/${roots.source}/${paths.source.css}/sprites/_icons.${styles.extname}`
# styles.spriteRetina
styles.spriteRetina: boolean = false
Enable retina spritesheet generation.
π° For example:
// Input:
// `/path/to/workspace/${roots.source}/${paths.source.img}/icons/*.png`
// `/path/to/workspace/${roots.source}/${paths.source.img}/icons/*@2x.png`
balm.config = {
styles: {
sprites: ['icons'],
spriteRetina: true
}
// Other Options...
};
// Output:
// image: `/path/to/workspace/${roots.target}/${paths.target.img}/icons-sprites.png`
// `/path/to/workspace/${roots.target}/${paths.target.img}/[email protected]`
// css: `/path/to/workspace/${roots.source}/${paths.source.css}/sprites/_icons.${styles.extname}`
# styles.spriteParams
styles.spriteParams: object = {}
Spritesmith parameters.
β HTML Javascript β