Using plugins

In the previous step, we learned how Lume can load assets and process them. Fortunately, you won't need to do this very often, because many common operations that you may want to do are already implemented in Lume in the form of plugins.

Plugins provide a extremely simple interface to configure Lume to perform operations like transpile JavaScript, transform images, generate site maps, etc. Plugins cover the common problems and tasks you can have when creating a website.

Minify CSS with a plugin

To minify your CSS code, instead of configuring Lume to load and process CSS files, you can use one of the plugins available for this. In this example let's use lightningcss a plugin to use Lightning CSS, an extremely fast CSS bundler and minifier, that not only minifies the code but also transforms it to make it compatible with all browsers.

To use a plugin in Lume, you have to import it in the _config.ts file and use it with the use() function:

import lume from "lume/mod.ts";
import lightningCSS from "lume/plugins/lightningcss.ts";

const site = lume();
site.use(lightningCSS());

export default site;

That's all! All the logic to configure Lume to load .css files and process them is hidden behind the plugin. Your _config.ts file is now much more clean.

Go to Plugins to see all official Lume plugins available.