Plugin for Metalsmith to inline CSS files.
npm install metalsmith-inline-css
This is a Metalsmith plugin to inline CSS files.
It is compatible with CSS preprocessor plugins (e.g. metalsmith-sass).
Install the package:
``
npm install metalsmith-inline-css
Add the plugin to your Metalsmith build chain:
`
const metalsmith = require('metalsmith');
const inlineCss = require('metalsmith-inline-css');
metalsmith(__dirname)
.source('./src')
.destination('./public')
.use(inlineCss());
.build(function (err) {
if (err) {
throw err;
}
console.log('Build complete');
});
`
This plugin avoids the complexity of parsing the HTML tree by instead using simple RegEx search and replace.
The downside is that you must format your tag in one of the following two ways, or the plugin will not inline your CSS file:
`
- OR -
(Replace /css/style.css with the path to your CSS file relative to the output directory.)
To build the example page run:
`
make example
Inspect files in example/ for more information.
Set the DEBUG variable to see what the plugin is doing.
`
DEBUG=metalsmith-inline-css:* node build.js