Getting Started with browserify-css
browserify-css is a Browserify plugin that allows you to require CSS files in your JavaScript. It streamlines the process of incorporating CSS into your browserify project’s dependency graph. This guide will provide you with a comprehensive overview of its most useful APIs along with code snippets.
Installation
npm install --save browserify-css
Usage
Include the browserify-css plugin in your browserify configuration.
var browserify = require('browserify'); var fs = require('fs');
browserify('./src/main.js')
.transform('browserify-css', {
autoInject: true, // Automatically inject CSS into the HTML document
rootDir: 'public/css' // Root directory for CSS files
})
.bundle()
.pipe(fs.createWriteStream('bundle.js'));
API and Options
autoInject
Automatically inject CSS into the HTML file.
browserify.transform('browserify-css', { autoInject: true });
rootDir
Specify a root directory for your CSS files. This helps resolve relative paths.
browserify.transform('browserify-css', { rootDir: 'public/css' });
minify
Enable or disable CSS minification.
browserify.transform('browserify-css', { minify: true });
output
Specify an output directory for extracted CSS files.
browserify.transform('browserify-css', { output: 'dist/css' });
Full App Example
Here is a complete example that bundles both JavaScript and CSS files using browserify-css.
// index.html <!DOCTYPE html> <html> <head>
<meta charset="UTF-8">
<title>Browserify CSS Example</title>
<script src="bundle.js"></script>
</head> <body>
<h1>Browserify CSS with JavaScript</h1>
</body> </html>
// src/main.js require('public/css/styles.css');
console.log('JavaScript and CSS bundled together!');
// src/public/css/styles.css body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
// bundler.js var browserify = require('browserify'); var fs = require('fs');
browserify('./src/main.js')
.transform('browserify-css', {
autoInject: true,
minify: true,
rootDir: 'public/css',
output: 'dist/css'
})
.bundle()
.pipe(fs.createWriteStream('bundle.js'));
This setup ensures your CSS is properly included and minified in your output bundle, optimizing your app’s performance and maintainability.
Save your configuration and run your build script to see the results!
Happy coding!
Hash: e685d9e69563a0b090de4c1c804bc5415717763662105c2ddc835cbf5e04d407
