A browserify transform to work with postcss.
The build script:
var browserify = require('browserify')
var fs = require('fs')
var to = __dirname + '/static/bundle.js'
var b = browserify(__dirname + '/src/entry.js')
b.transform(require('browserify-postcss', {
// a list of postcss plugins
plugin: [
'postcss-import',
'postcss-advanced-variables',
['postcss-custom-url', [
['inline', { maxSize: 10 }],
['copy', { assetOutFolder: __dirname + '/static/assets' }],
]],
],
// basedir where to search plugins
basedir: __dirname + '/src',
// options for processing.
postCssOptions: { to: to },
// insert a style element to apply the styles
inject: true,
})
b.bundle().pipe(
fs.createWriteStream(to)
)entry.js:
require('./entry.css')
console.log('styles from entry.css are applied')Specify a list of postcss plugins to apply.
Type: String, Array
Default: null
Specify where to look for plugins.
Specify the options for the postcss processor.
The from and to fields will be set to the css file path by default.
Specify how to use the styles:
If true, styles are applied immediately.
If false, require('style.css') will return the string representation of the styles.
A list of file extensions to identify styles.
Type: Array
Default: ['.css', '.scss', '.sass']
Imported files will NOT be watched when used with watchify.
- reduce-css: bundle css files without
requireing them in js.