ember-cli-less

3.0.2 verified Sat Apr 25 auth: no javascript

Ember CLI addon to compile Less CSS into your Ember app's CSS. Current stable version is 3.0.2. Maintained as an Ember ecosystem addon, integrates with Ember CLI build pipeline. Supports multiple input/output CSS files, source maps, and nested addon usage. Alternatives include ember-cli-sass for SCSS. Requires Ember.js v3.12+, Ember CLI v2.13+, and Node.js v10+.

Common errors

error Error: Cannot find module 'less' ↓

cause Missing peer dependency 'less'.

fix

Run 'npm install --save-dev less' in your project.

error Unrecognized option: path (in lessOptions) ↓

cause Using 'path' instead of 'paths' for include paths.

fix

Change to 'paths: [...]' as an array.

error ENOENT: no such file or directory, open '.../app/styles/app.less' ↓

cause Missing app.less file when addon expects it.

fix

Create 'app/styles/app.less' even if empty, or adjust input path.

Warnings

gotcha Less compiler must be installed separately as a peer dependency. ↓

fix Run 'npm install --save-dev less' alongside ember-cli-less.

gotcha When using multiple output paths, source map names are auto-generated from output path and cannot be customized. ↓

fix Accept the generated .map filename; manual naming is not supported.

breaking Breaking change in v3.0.0: Requires Node.js >=10, Ember.js >=3.12, Ember CLI >=2.13. ↓

fix Update your project to meet minimum versions. See CHANGELOG.

deprecated The 'mergeTrees' option is deprecated in favor of using broccoli-merge-trees directly. ↓

fix Use broccoli-merge-trees in your own build process instead of through lessOptions.

gotcha Addon styles are compiled from 'addon/styles/addon.less' into merged addon CSS; direct imports in app.less may not work. ↓

fix For addons, create 'app/styles/app.less' in the addon and use @import to include addon styles.

Install

npm install ember-cli-less

yarn add ember-cli-less

pnpm add ember-cli-less

Imports

ember-cli-less (addon installation)
wrong
```
npm install --save ember-cli-less
```
correct
```
npm install --save-dev ember-cli-less
```
Addon should be in devDependencies, not dependencies.

lessOptions configuration

wrong

let app = new EmberApp({ lessOptions: { path: [...] } });

correct

let app = new EmberApp({ lessOptions: { paths: [...] } });

Use 'paths' (array) for include paths, not 'path'.

outputPaths configuration

wrong

let app = new EmberApp({ outputPaths: { 'app.css': '/assets/my-app.css' } });

correct

let app = new EmberApp({ outputPaths: { app: { css: { app: '/assets/my-app.css' } } } });

Use the nested object format with 'app.css' key under 'app'.

Quickstart

Install ember-cli-less and Less compiler, configure include paths and source maps, then import Bootstrap Less in app.less.

// Install the addon
npm install --save-dev ember-cli-less less

// In ember-cli-build.js
let app = new EmberApp(defaults, {
  lessOptions: {
    paths: [
      'node_modules/bootstrap-less/bootstrap'
    ],
    sourceMap: true
  }
});

// Then in app/styles/app.less:
@import 'bootstrap';
// Your custom Less styles