A Browserify transform for bundling, rebasing, inlining, and minifying CSS files.
If you're new to browserify, check out the browserify handbook and the resources on browserify.org.
npm install --save-dev browserify-css
app.css:
@import url("modules/foo/index.css");
@import url("modules/bar/index.css");
body {
background-color: #fff;
}app.js:
var css = require('./app.css');
console.log(css);You can compile your app by passing -t browserify-css to browserify:
$ browserify -t browserify-css app.js > bundle.js
Each require('./path/to/file.css') call will concatenate CSS files with @import statements, rebasing urls, inlining @import, and minifying CSS. It will add a style tag with an optional data-href attribute to the head section of the document during runtime:
<html>
<head>
<style type="text/css" data-href="app.css">...</style>
</head>
</html>
You can put your browserify-css options into your package.json file:
{
"browserify-css": {
"auto-inject": true,
"minify": true,
"rootDir": "."
}
}or use an external configuration file like below:
{
"browserify-css": "./config/browserify-css.js"
}config/browserify-css.js:
module.exports = {
"auto-inject": true,
"minify": true,
"rootDir": "."
};Type: Boolean
Default: true
If true, each require('path/to/file.css') call will add a style tag to the head section of the document.
Type: String
Default: ./
An absolute path to resolve relative paths against the project's base directory.
Type: Boolean
Default: false
Type: Object
Default: {}
Check out a list of CSS minify options at CleanCSS.
MIT