Less
Less compilation with functions and mixins
Less
Packem compiles .less files through the Less loader in
@visulima/rollup-plugin-css. The loader forwards
its options directly to the Less compiler.
Overview
This example demonstrates:
- Compiling Less with variables, mixins, and functions
- Registering the Less loader in
packem.config.ts - Passing Less compiler options
Setup
The Less loader requires the less package.
npm install --save-dev lessDirectory Structure
my-package/
├── src/
│ ├── index.ts
│ └── styles.less
├── package.json
└── packem.config.tsSource Files
src/styles.less
@primary-color: #007bff;
@border-radius: 0.25rem;
.button-style(@bg-color) {
background-color: @bg-color;
color: white;
padding: 0.5rem 1rem;
border: none;
border-radius: @border-radius;
cursor: pointer;
&:hover {
background-color: darken(@bg-color, 10%);
}
}
.btn-primary {
.button-style(@primary-color);
}src/index.ts
import './styles.less'
export function createButton() {
const button = document.createElement('button')
button.className = 'btn-primary'
button.textContent = 'Click me'
return button
}Configuration
Register the Less loader by importing it and adding it to rollup.css.loaders.
The less option accepts the standard Less compiler options
(Less.Options).
import { defineConfig } from '@visulima/packem/config'
import transformer from '@visulima/packem/transformer/esbuild'
import lessLoader from '@visulima/packem/css/loader/less'
export default defineConfig({
transformer,
rollup: {
css: {
mode: 'extract',
loaders: [lessLoader],
less: {
math: 'parens-division',
paths: ['node_modules', 'src/styles'],
},
},
},
})The less option maps to Less.Options. See the
Less.js options documentation for the
full list, including math, paths, globalVars, and plugins.
Building
packem build