LESS Setup and Installation

What You Need to Compile LESS

LESS is distributed as an npm package that ships both a JavaScript API and a command-line tool called lessc. Installing it locally in a project (rather than globally) keeps the compiler version pinned per project.

Once installed, you can compile a single file from the terminal, or let a bundler (Vite, webpack, Parcel) invoke the compiler automatically whenever it encounters a .less file.

npm install -D less

Installs LESS as a dev dependency, adding the lessc binary to node_modules/.bin/.

Compiling from the Command Line

npx lessc src/styles.less dist/styles.css

• The first argument is the input .less file; the second is the output .css file.
• Add --source-map to generate a source map alongside the compiled CSS.
• Add --clean-css (with the less-plugin-clean-css plugin installed) to minify the output.
• Watch mode isn't built in, use a bundler's dev server or a tool like chokidar-cli for automatic recompilation.

LESS Setup Cheatsheet

Common install and compile commands across different workflows.

Using LESS with Vite

Vite has built-in support for LESS. Once the less package is installed, you can import .less files directly in your JavaScript or framework components, no extra configuration required.

// main.js
import "./styles.less";

Vite detects the .less extension and compiles it automatically during dev and build.

Using LESS with webpack

webpack requires the less-loader package (which internally uses LESS) chained together with css-loader and, typically, style-loader or MiniCssExtractPlugin.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },
};

Editor Support

Most modern editors, including VS Code and Cursor, understand .less syntax out of the box or through lightweight extensions, providing syntax highlighting, bracket matching, and basic linting.

• Enable a LESS syntax highlighting extension for readable, colorized code.
• Use stylelint with stylelint-config-standard-less for consistent linting rules.
• Configure format-on-save so compiled indentation stays consistent across a team.

Common Mistakes

• Installing LESS globally instead of as a project dev dependency, causing version mismatches across machines.
• Forgetting to add a less-loader (or equivalent) step, then wondering why .less files fail to import.
• Committing compiled .css output to version control alongside .less source, causing drift between the two.
• Not generating source maps, making it hard to trace a compiled CSS rule back to its original .less line.

Key Takeaways

• Install LESS locally with npm install -D less so the compiler version is pinned per project.
• The lessc CLI compiles a single file directly from the terminal.
• Vite supports .less imports automatically; webpack needs less-loader chained with css-loader.
• Generate source maps during development to trace compiled CSS back to the original LESS source.