4

I'm making a library containing some generic UI components, some kind of Bootstrap. Suppose I have the following LESS files structure:

button.less
checkbox.less
index.less
variables.less

Each component style file has @import "variables.less";. Index file imports all components files. Now I would like to distribute library.less and variables.less files into a package.

How do I bundle the index file? I used to concatenate all the files and remove repeated @import "variables"; line using regexps, maybe there is a Less API for doing this.

1
  • No, Less has no facilities for producing less files. So for this kind of stuff you're on your own. By the way, there's no reason to remove redundant imports (aside from making the the "package" more readable) since any subsequent imports of the same file have no effect anyway (see the docs). Commented Oct 15, 2017 at 12:59

1 Answer 1

4

You can use less-bundle https://www.npmjs.com/package/less-bundle

// variables.less
@red: #ff0000;
@grey: #cccccc;

// button.less
@import 'variables.less';
.btn-danger {
     background: @color;
}

// checkbox.less
@import 'variables.less';
input[type='checkbox'] {
   background: @grey;
}

// index.less
@import 'button.less';
@import 'checkbox.less';

Here is main code to do that.

// bundler.js
const path = require('path')
const bundle = require('less-bundle');
const srcFile = path.join(__dirname, './index.less');

bundle({
  src: srcFile,
  dest: path.join(__dirname, './bundle.less')
}, function (err, data) {
  console.log('Error Bundle', err, data);
});

Run bundler.js using command node bundler.js and it will create a bundle.less file containing all styles.

// bundle.less
@red: #ff0000;
@grey: #cccccc;

.btn-danger {
     background: @color;
}

input[type='checkbox'] {
   background: @grey;
}
1
  • 1
    This should be the accepted answer and addressed my exact use case. Commented May 21, 2018 at 18:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.