Source Maps

Generate source maps files for your CSS and JS.


Lume plugins like Postcss, esbuild, Terser, SASS or Lightning CSS process and bundle your CSS and JavaScript files. Combine them with source_maps to create the source maps files to debug your code in the browser's development tools.


Import this plugin in your _config.ts file to use it:

import lume from "lume/mod.ts";
import sass from "lume/plugins/sass.ts";
import postcss from "lume/plugins/postcss.ts";
import esbuild from "lume/plugins/esbuild.ts";
import sourceMaps from "lume/plugins/source_maps.ts";

const site = lume();

// Process your CSS and JS code with other plugins

// Use the source maps plugin to generate the .map files

export default site;

See all available options in Deno Doc.


There are two options to configure the source map generation. The default values:

import lume from "lume/mod.ts";
import esbuild from "lume/plugins/esbuild.ts";

const site = lume();

  inline: false,
  sourceContent: false,

export default site;
  • inline: Set to true to inline the source map code in the main CSS/JavaScript file. If it's false (by default) the code is saved in an external file with the same name but appending the .map extension.
  • sourceContent: If your browser can't load the source content, set this option to true, so the source content will be included in the source map.