How to Compile Less to CSS

Compiling Less

Browsers don't read Less directly — you compile it to CSS. Here are the main ways.

Method 1: lessc CLI

npm install -g less
lessc styles.less styles.css

# Watch mode (with less-watch-compiler)
less-watch-compiler src dist

Method 2: In a Build Tool

// With webpack
npm install less less-loader --save-dev
// Add less-loader to your webpack rules

Method 3: Browser (Development Only)

<link rel="stylesheet/less" href="styles.less">
<script src="less.min.js"></script>
<!-- Slow — never use in production -->

Minify for Production

lessc --clean-css styles.less styles.min.css

FAQs

Should I compile in the browser?

No — only for quick tests. Always pre-compile for production. More in our Less section.

How do I auto-compile on save?

Use watch mode or a bundler plugin.