Less.js Options Source Map Options

Source maps play a vital role in JavaScript development, allowing developers to debug their code more effectively by mapping the code’s execution to its original source files. Less.js, a popular JavaScript preprocessor for CSS, provides several options for configuring source maps.

Source maps allow developers to trace CSS styles back to their corresponding Less rules and identify the specific Less files responsible for generating certain styles. This makes debugging and maintaining stylesheets more manageable, especially when dealing with large projects with numerous Less files.

Less.js Source Maps Options

When configuring source maps in Less.js, you can use the following parameters:

• sourceMap: Enables or disables source map generation. Set to 'true' enable source map generation, and ‘false' to disable it. By default, source map generation is disabled.
• sourceMapFileInline: Specifies whether to embed the source map directly into the compiled CSS file. When set to ‘true', the source map is included as a base64-encoded string within the CSS file. If set to ‘false', the source map is saved as a separate file. The default value is ‘false'.
• sourceMapRootpath: Sets the root path for the source files in the source map. This is useful when the compiled CSS file is hosted on a different server or directory structure from the original Less files.
• sourceMapBasepath: Specifies the base path for resolving relative paths of the source files in the source map. If not specified, it defaults to the directory where the Less file is located.
• sourceMapURL: Overrides the URL or file path to the source map when it is saved as a separate file. This allows you to customize the location or name of the source map file.

Syntax

lessOptions = {
    sourceMap: true,  // Enable source map generation
    sourceMapFileInline: false,  // Embed the source map in the CSS file
    sourceMapRootpath: '/assets/css/',  // Set the root path for the source files
    sourceMapBasepath: '/less/',  // Set the base path for resolving relative paths
    sourceMapURL: 'styles.map'  // Customize the source map file name or location
};
less.render(lessCode, lessOptions)
    .then(css => {
      // Process the compiled CSS
  })
    .catch(error => {
     // Handle compilation errors
  });

Example 1: Create a new file called compile.js in the project directory and add the following content:

Javascript

const less = require('less');
const fs = require('fs');

const input = `
@color: red;

body {
  background-color: @color;
}

`;

const options = {
    sourceMap: {
        sourceMapFileInline: false,
        outputSourceFiles: true,
    },
};

less.render(input, options)
    .then(output => {
        fs.writeFile('styles.css', output.css, err => {
            if (err) throw err;
            console.log('styles.css file has been saved.');

            fs.writeFile('styles.css.map', output.map, err => {
                if (err) throw err;
                console.log('styles.css.map file has been saved.');
            });
        });
    })
    .catch(error => {
        console.error(error);
    });

Output: If everything is set up correctly, you should see the compiled CSS output in the console. Additionally, a ‘styles.css.map' file should be generated in the project directory.

Example 2: Here’s an example that demonstrates the usage of Less.js options related to source maps:

Javascript

const less = require('less');

const input = `
@color: red;

body {
  background-color: @color;
}
`;

const options = {
    sourceMap: true,
    sourceMapFilename: 'styles.css.map',
    sourceMapBasepath: '/less',
    sourceMapRootpath: '/assets',
    sourceMapURL: '/path/to/styles.css.map',
    sourceMapBaseURL: '/less',
    sourceMapRootURL: 'http://cdn.example.com/assets'
};

less.render(input, options)
    .then(output => {
        console.log('Compiled CSS:\n', output.css);
        console.log('Source Map:\n', output.map);
    })
    .catch(error => {
        console.error(error);
    });

Output:

Reference: https://lesscss.org/usage/#less-options-source-map-options